{% extends "account/base.html" %}

{% load i18n %}

{% block head_title %}
  {% translate "Account" %}
{% endblock head_title %}
{% block inner %}
  <h1>{% translate "E-mail Addresses" %}</h1>
  {% if user.emailaddress_set.all %}
    <p>{% translate "The following e-mail addresses are associated with your account:" %}</p>
    <form action="{% url 'account_email' %}" class="email_list" method="post">
      {% csrf_token %}
      <fieldset class="blockLabels">
        {% for emailaddress in user.emailaddress_set.all %}
          <div class="radio">
            <label for="email_radio_{{ forloop.counter }}"
                   class="{% if emailaddress.primary %}primary_email{% endif %}">
              <input id="email_radio_{{ forloop.counter }}"
                     type="radio"
                     name="email"
                     {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{% endif %}
                     value="{{ emailaddress.email }}" />
              {{ emailaddress.email }}
              {% if emailaddress.verified %}
                <span class="verified">{% translate "Verified" %}</span>
              {% else %}
                <span class="unverified">{% translate "Unverified" %}</span>
              {% endif %}
              {% if emailaddress.primary %}
                <span class="primary">{% translate "Primary" %}</span>
              {% endif %}
            </label>
          </div>
        {% endfor %}
        <div class="form-group">
          <button class="secondaryAction btn btn-primary"
                  type="submit"
                  name="action_primary">{% translate "Make Primary" %}</button>
          <button class="secondaryAction btn btn-primary"
                  type="submit"
                  name="action_send">{% translate "Re-send Verification" %}</button>
          <button class="primaryAction btn btn-primary"
                  type="submit"
                  name="action_remove">{% translate "Remove" %}</button>
        </div>
      </fieldset>
    </form>
  {% else %}
    <p>
      <strong>{% translate "Warning:" %}</strong> {% translate "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
    </p>
  {% endif %}
  <h2>{% translate "Add E-mail Address" %}</h2>
  <form method="post" action="{% url 'account_email' %}" class="add_email">
    {% csrf_token %}
    {{ form }}
    <button class="btn btn-primary" name="action_add" type="submit">{% translate "Add E-mail" %}</button>
  </form>
{% endblock inner %}
{% block inline_javascript %}
  {{ block.super }}
  <script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
      const message = "{% translate 'Do you really want to remove the selected e-mail address?' %}";
      const actions = document.getElementsByName('action_remove');
      if (actions.length) {
        actions[0].addEventListener("click", function(e) {
          if (!confirm(message)) {
            e.preventDefault();
          }
        });
      }
      Array.from(document.getElementsByClassName('form-group')).forEach(x => x.classList.remove('row'));
    });
  </script>
{% endblock inline_javascript %}