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

{% load i18n %}

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

{% block content %}
    <div class="content-view">
        <h2>{% trans "Email Addresses" %}</h2>
        <p>Her kan du tilføje og ændre emailadresser tilknyttet din konto.</p>
        <p>{% trans 'The following email addresses are associated with your account:' %}</p>

        <hr />

        {% if user.emailaddress_set.all %}
            <form action="{% url 'account_email' %}" class="email_list" method="post">
                {% csrf_token %}
                <fieldset class="blockLabels">
                    <div class="buttonHolder">
                        <button class="small" type="submit" name="action_primary" style="float:right">+ Add Email</button>
                        <button class="small" disabled type="submit" id="action_primary" name="action_primary">Make Primary</button>
                        <button class="small" type="submit" name="action_send">Re-send Verification</button>
                        <button class="small" type="submit" name="action_remove">Remove</button>
                    </div>
                    <table class="table" id="user_email_table">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{% trans "Address" %}</th>
                                <th>{% trans "Status" %}</th>
                                <th>{% trans "Primary" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for emailaddress in user.emailaddress_set.all %}
                                <tr>
                                    <label for="email_radio_{{ forloop.counter }}"
                                           class="{% if emailaddress.primary %}primary_email{% endif %}">
                                        <td>
                                            <input
                                                id="email_radio_{{ forloop.counter }}"
                                                type="radio"
                                                name="email"
                                                value="{{ emailaddress.email }}"
                                                {% if emailaddress.primary or user.emailaddress_set.count == 1 %}
                                                checked="checked"
                                                {% endif %}
                                                class="{% if emailaddress.primary %}primary_email{% endif %}"
                                            />
                                        </td>
                                        <td>
                                            {{ emailaddress.email }}
                                        </td>
                                        <td>
                                            {% if emailaddress.verified %}
                                                <span class="label label-success">{% trans "Verified" %}</span>
                                            {% else %}
                                                <span class="label label-danger">{% trans "Unverified" %}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if emailaddress.primary %}
                                                <span class="label label-primary">{% trans "Primary" %}</span>
                                            {% endif %}
                                        </td>
                                    </label>
                                </tr>
                            {% endfor %}

                        </tbody>
                    </table>
                </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 %}
        <!--
        <hr />

        <h3>{% trans "Add E-mail" %}</h3>
        <div class="panel-body">
            <form method="post" action="{% url 'account_email' %}"
                  class="add_email">
                {% csrf_token %}
                {{ form.as_p }}
                <button name="action_add" class="btn btn-success" type="submit">
                    {% trans "Add E-mail" %}
                </button>
            </form>
        </div>
        -->
    </div>

    <script type="text/javascript">
        (function () {
            let message = "{% trans '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();
                    }
                });
            }

            let radio_actions = document.getElementsByName('email');
            if (radio_actions.length) {
                for (radio of radio_actions) {
                    radio.addEventListener("change", function (e) {
                        document.getElementById('action_primary').disabled = e.target.classList.contains('primary_email')
                    });
                }
            }
        })();
    </script>

{% endblock %}