{% extends "base.html" %}

{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}Account{% endblock title%}

{% block body_attribute %}class="authentication-bg"{% endblock body_attribute %}

{% block content %}

<div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-12">
        <div class="card auth-card">
          <div class="card-body p-0">
            <div class="row align-items-center g-0 p-5">
              <h1>{% trans "E-mail Addresses" %}</h1>

              {% if user.emailaddress_set.all %}

              <p>{% trans '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">{% trans "Verified" %}</span>
                      {% else %}
                      <span class="unverified">{% trans "Unverified" %}</span>
                      {% endif %}
                      {% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
                    </label>
                  </div>
                  {% endfor %}

                  <div class="form-group">
                    <button class="secondaryAction btn btn-primary" type="submit" name="action_primary">{% trans 'Make
                      Primary' %}
                    </button>
                    <button class="secondaryAction btn btn-primary" type="submit" name="action_send">{% trans 'Re-send
                      Verification' %}
                    </button>
                    <button class="primaryAction btn btn-primary" type="submit" name="action_remove">{% trans 'Remove'
                      %}
                    </button>
                  </div>

                </fieldset>
              </form>

              {% else %}
              <p><strong>{% trans 'Warning:'%}</strong> {% trans "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>{% trans "Add E-mail Address" %}</h2>

              <form method="post" action="{% url 'account_email' %}" class="add_email">
                {% csrf_token %}
                {{ form|crispy }}
                <button class="btn btn-primary" name="action_add" type="submit">{% trans "Add E-mail" %}</button>
              </form>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock content %}


{% block extra_javascript %}
{{ block.super }}
<script type="text/javascript">
  window.addEventListener('DOMContentLoaded',function() {
    const message = "{% trans '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();
        }
      });
    }
  });

  $('.form-group').removeClass('row');
</script>
{% endblock extra_javascript %}