{% extends "jobs/base.html" %}
{% load i18n %}
{% load account %}
{% load static %}

{% block head_title %}{% trans "Confirm E-mail Address" %}{% endblock %}

{% block content %}
<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-[80vh] flex items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8 animate__animated animate__fadeInUp">
        
        <!-- ✅ Confirmation Card -->
        <div class="bg-white rounded-[2.5rem] shadow-2xl overflow-hidden border border-slate-100 p-8 md:p-12 text-center relative">
            
            <!-- Floating Decoration -->
            <div class="absolute -top-10 -right-10 w-32 h-32 bg-green-600/10 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-blue-600/10 rounded-full blur-3xl"></div>

            <!-- Icon Section -->
            <div class="relative mx-auto w-24 h-24 mb-8">
                <div class="absolute inset-0 bg-green-100 rounded-full animate-pulse opacity-50"></div>
                <div class="relative flex items-center justify-center w-24 h-24 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full shadow-lg text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>

            <!-- Content -->
            <h2 class="text-3xl font-black text-slate-900 mb-4 tracking-tight uppercase">
                Email <span class="text-green-600 italic">Verify Karein!</span>
            </h2>

            {% if confirmation %}
                {% user_display confirmation.email_address.user as user_display %}
                <p class="text-slate-500 font-medium mb-8 leading-relaxed">
                    {% blocktrans with email=confirmation.email_address.email %}Bhai, kya aap confirm karte hain ki <b>{{ email }}</b> aapka hi email address hai?{% endblocktrans %}
                </p>

                <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
                    {% csrf_token %}
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-black py-4 rounded-2xl shadow-xl transition-all transform hover:scale-[1.02] active:scale-95 border-0">
                        Haan, Confirm Karein! 🚀
                    </button>
                </form>
            {% else %}
                <div class="p-6 bg-red-50 rounded-3xl border border-red-100 mb-6">
                    <p class="text-red-600 font-bold">
                        {% blocktrans %}Bhai, ye link expire ho gaya hai ya galat hai. Kripya naya verification link mangwayein.{% endblocktrans %}
                    </p>
                </div>
                <a href="{% url 'account_email' %}" class="text-blue-600 font-bold hover:underline">Naya Link Bhejein</a>
            {% endif %}

            <div class="mt-8 pt-6 border-t border-slate-50">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
                    Videsh Chalo • Safety First 🛡️
                </p>
            </div>
        </div>

        <!-- Back to Login -->
        <div class="text-center">
            <a href="{% url 'account_login' %}" class="text-sm text-slate-400 font-bold hover:text-blue-600 transition-colors no-underline">
                <i class="fas fa-arrow-left me-2"></i> Wapas Login Par Chalein
            </a>
        </div>
    </div>
</div>
{% endblock %}