{% extends "base.html" %}
{% load i18n %}
{% load account %}

{% block head_title %}Confirm Email{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 flex items-center justify-center py-12 px-4">
  <div class="w-full max-w-md">

    <div class="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">

      <div class="bg-gradient-to-r from-slate-800 to-slate-900 px-8 pt-8 pb-6 text-center">
        <div class="inline-flex items-center justify-center h-14 w-14 rounded-2xl bg-green-500/20 border border-green-500/30 mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </div>
        <h1 class="text-2xl font-bold text-white">Confirm Email Address</h1>
      </div>

      <div class="px-8 py-8">
        {% if confirmation %}
          {% user_display confirmation.email_address.user as user_display %}
          {% if can_confirm %}
            <p class="text-slate-600 mb-6">
              Please confirm that
              <strong class="text-slate-900">{{ confirmation.email_address.email }}</strong>
              is an email address for user <strong class="text-slate-900">{{ user_display }}</strong>.
            </p>
            <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
              {% csrf_token %}
              {{ redirect_field }}
              <button type="submit"
                      class="w-full bg-green-600 hover:bg-green-500 text-white font-semibold py-3 px-4 rounded-xl transition-colors">
                Confirm this email address
              </button>
            </form>
          {% else %}
            <div class="bg-red-50 border border-red-200 rounded-xl p-4 text-red-800 text-sm">
              Unable to confirm this email address because it is already confirmed by a different account.
            </div>
            <div class="mt-6 text-center">
              <a href="{% url 'account_login' %}" class="text-indigo-600 hover:text-indigo-500 font-medium text-sm">
                Return to Sign In
              </a>
            </div>
          {% endif %}
        {% else %}
          <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 text-yellow-800 text-sm mb-6">
            This email confirmation link has expired or is invalid.
          </div>
          <p class="text-slate-600 text-sm mb-6">
            Please <a href="{% url 'account_email' %}" class="text-indigo-600 hover:underline">request a new email confirmation</a>.
          </p>
        {% endif %}
      </div>
    </div>

  </div>
</div>
{% endblock %}