{% extends 'base.html' %}
{% load static allauth i18n %}

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

{% block content %}
<div class="container mx-auto max-w-md mt-6">
  <h1 class="text-3xl font-bold text-center mb-6">{% trans "Email Addresses" %}</h1>

  {% if emailaddresses %}
    <p class="mb-4">
      {% trans "The following email addresses are associated with your account:" %}
    </p>
    {% url 'account_email' as email_url %}
    <form method="post" action="{{ email_url }}" class="space-y-4">
      {% csrf_token %}
      {% for radio in emailaddress_radios %}
        <div class="flex items-center">
          <input type="radio" id="{{ radio.id }}" name="email" value="{{ radio.emailaddress.email }}" class="mr-2" {% if radio.checked %}checked{% endif %}>
          <label for="{{ radio.id }}">
            {{ radio.emailaddress.email }}
            {% if radio.emailaddress.verified %}
              <span class="ml-1 bg-green-200 text-green-800 px-2 py-1 rounded text-xs">{% trans "Verified" %}</span>
            {% else %}
              <span class="ml-1 bg-yellow-200 text-yellow-800 px-2 py-1 rounded text-xs">{% trans "Unverified" %}</span>
            {% endif %}
            {% if radio.emailaddress.primary %}
              <span class="ml-1 bg-blue-200 text-blue-800 px-2 py-1 rounded text-xs">{% trans "Primary" %}</span>
            {% endif %}
          </label>
        </div>
      {% endfor %}
      <div class="flex flex-col md:flex-row md:space-x-2">
        <button type="submit" name="action_primary" class="btn btn-primary w-full">{% trans "Make Primary" %}</button>
        <button type="submit" name="action_send" class="btn btn-secondary w-full">{% trans "Re-send Verification" %}</button>
        <button type="submit" name="action_remove" class="btn btn-danger w-full">{% trans "Remove" %}</button>
      </div>
    </form>
  {% else %}
    {% include "account/snippets/warn_no_email.html" %}
  {% endif %}

  {% if can_add_email %}
    <h2 class="text-2xl font-bold mt-8 mb-4">{% trans "Add Email Address" %}</h2>
    {% url 'account_email' as action_url %}
    <form method="post" action="{{ action_url }}" class="space-y-4">
      {% csrf_token %}
      <div>
        <label for="{{ form.email.id_for_label }}" class="block font-medium>{{ form.email.label }}</label>
        {{ form.email }}
        {{ form.email.errors }}
      </div>
      <button type="submit" name="action_add" class="btn btn-primary w-full">{% trans "Add Email" %}</button>
    </form>
  {% endif %}
</div>
{% endblock content %}

{% 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 extra_body %}