{% extends "account/base.html" %}
{% load i18n crispy_forms_tags %}
{% block title %}{% translate "Account" %}{% endblock title %}
{% block page_title %}{% translate "E-mail Addresses" %}{% endblock page_title %}

{% block content %}
    {% 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 %}
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th>{% translate "Email address" %}</th>
                    <th>{% translate "Verified" %}</th>
                    <th>{% translate "Primary" %}</th>
                    <th>{% translate "Selection" %}</th>
                </tr>
                </thead>
                <tbody>
                {% for emailaddress in user.emailaddress_set.all %}
                    <tr>
                        <td>{{ emailaddress.email }}</td>
                        <td>
                            {% if emailaddress.verified %}
                                <span class="text-success"><i class="bi-check-circle-fill" title="{% translate "Verified" %}"></i></span>
                            {% else %}
                                <span class="text-warning"><i class="bi-dash-circle-fill" title="{% translate "Unverified" %}"></i></span>
                            {% endif %}
                        </td>
                        <td>
                            {% if emailaddress.primary %}
                                <span class="text-success"><i class="bi-check-circle-fill" title="{% translate "This is the current primary Email address" %}"></i></span>
                            {% else %}
                                <span class="text-secondary"><i class="bi-circle"></i></span>
                            {% endif %}
                        </td>
                        <td>
                            <input id="email_radio_{{ forloop.counter }}" type="radio" name="email"
                                   {% if emailaddress.primary %}checked="checked"{% endif %}
                                   value="{{ emailaddress.email }}"/><label
                                for="email_radio_{{ forloop.counter }}"
                                aria-label="{% blocktranslate trimmed with address=emailaddress.email %}
                                Select {{ address }}
{% endblocktranslate %}"></label>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <p>
                {% if user.emailaddress_set.count > 1 %}
                    <button class="btn btn-secondary" type="submit"
                            name="action_primary">{% translate 'Make Primary' %}</button>
                {% endif %}
                <button class="btn btn-secondary" type="submit"
                        name="action_send">{% translate 'Re-send Verification' %}</button>
                <button class="btn btn-warning" type="submit" name="action_remove">{% translate 'Remove' %}</button>
            </p>
        </form>
    {% else %}
        <p class="text-warning">
            <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 | crispy }}
        <button name="action_add" type="submit" class="btn btn-primary">{% translate "Add E-mail" %}</button>
    </form>
{% endblock content %}

{% block extra_js %}
    <script type="text/javascript">
        (function () {
            const message = "{% translate 'Do you really want to remove the selected e-mail address?' %}";
            let actions = document.getElementsByName('action_remove');
            if (actions.length) {
                actions[0].addEventListener("click", function (e) {
                    if (!confirm(message)) {
                        e.preventDefault();
                    }
                });
            }
        })();
    </script>
{% endblock extra_js %}