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

{% block head_title %}Email Addresses{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto py-12 px-4">

  <h1 class="text-2xl font-bold text-slate-900 mb-2">Email Addresses</h1>
  <p class="text-slate-500 mb-8">Manage the email addresses associated with your account.</p>

  <!-- Existing email addresses -->
  {% if emailaddresses %}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden mb-8">
      <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
        <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wide">Your email addresses</h2>
      </div>
      <form method="post" action="{% url 'account_email' %}" class="divide-y divide-slate-100">
        {% csrf_token %}
        <div class="px-6 py-4 space-y-3">
          {% for radio in emailaddress_radios %}
            {% with emailaddress=radio.emailaddress %}
              <label class="flex items-center gap-4 cursor-pointer group">
                <input type="radio" name="email" value="{{ emailaddress.email }}"
                       {% if radio.checked %}checked{% endif %}
                       class="h-4 w-4 border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                <div class="flex-1 min-w-0">
                  <span class="text-sm font-medium text-slate-900">{{ emailaddress.email }}</span>
                  <div class="flex flex-wrap gap-1.5 mt-0.5">
                    {% if emailaddress.primary %}
                      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700">Primary</span>
                    {% endif %}
                    {% if emailaddress.verified %}
                      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Verified</span>
                    {% else %}
                      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Unverified</span>
                    {% endif %}
                  </div>
                </div>
              </label>
            {% endwith %}
          {% endfor %}
        </div>
        <div class="px-6 py-4 bg-slate-50 flex flex-wrap gap-3">
          <button type="submit" name="action_primary"
                  class="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
            Make Primary
          </button>
          <button type="submit" name="action_send"
                  class="bg-white hover:bg-slate-50 text-slate-700 text-sm font-medium px-4 py-2 rounded-lg border border-slate-300 transition-colors">
            Re-send Verification
          </button>
          <button type="submit" name="action_remove"
                  class="bg-white hover:bg-red-50 text-red-600 text-sm font-medium px-4 py-2 rounded-lg border border-red-200 transition-colors"
                  onclick="return confirm('Remove this email address?')">
            Remove
          </button>
        </div>
      </form>
    </div>
  {% else %}
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-8 text-sm text-yellow-800">
      No email address set. Please add one below.
    </div>
  {% endif %}

  <!-- Add email address form -->
  {% if can_add_email %}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
      <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
        <h2 class="text-sm font-semibold text-slate-700 uppercase tracking-wide">Add email address</h2>
      </div>
      <form method="post" action="{% url 'account_email' %}" class="px-6 py-6 space-y-4">
        {% csrf_token %}
        {% for field in form %}
          <div>
            <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
              {{ field.label }}
            </label>
            {{ field }}
            {% if field.errors %}
              {% for error in field.errors %}
                <p class="text-red-600 text-xs mt-1">{{ error }}</p>
              {% endfor %}
            {% endif %}
          </div>
        {% endfor %}
        <button type="submit" name="action_add"
                class="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-6 py-2.5 rounded-xl transition-colors">
          Add Email
        </button>
      </form>
    </div>
  {% endif %}

</div>
{% endblock %}

{% block extra_body %}
<script src="{% static 'account/js/account.js' %}"></script>
<script src="{% static 'account/js/onload.js' %}"></script>
<script data-allauth-onload="allauth.account.forms.manageEmailForm" type="application/json">{
  "i18n": {"confirmDelete": "{% trans 'Do you really want to remove the selected email address?' %}"}
}
</script>
{% endblock %}