{% extends 'base.html' %}

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

{% block title %}Email Accounts{% endblock %}

{% block content %}
    <div class="row justify-content-center">
        <div class="col-sm-8 col-12">
            <div class="card">
                <div class="card-body border-bottom">
                    <p class="card-title mb-0">{% trans "Related email addresses" %}</p>
                </div>
                <div class="card-body">

                    {% if user.emailaddress_set.all %}
                        <p class="card-text">{% 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="ctrlHolder">
                                        <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 %}
                                                <b class="text-success">
                                                <span class="verified">
                                                    <i class="fa fa-check-circle"></i> {% trans "Verified" %}
                                                </span>
                                                </b>
                                            {% else %}
                                                <b class="text-danger">
                                                    <span class="unverified"><i
                                                            class="fa fa-times-circle"></i> {% trans "Unverified" %}
                                                    </span>
                                                </b>
                                            {% endif %}
                                            {% if emailaddress.primary %}
                                                <b class="text-success"><i class="fa fa-check-circle"></i>
                                                    <span class="primary">{% trans "Primary" %}</span>
                                                </b>
                                            {% endif %}
                                        </label>
                                    </div>
                                {% endfor %}
                                <hr>
                                <div class="buttonHolder">
                                    <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-danger" type="submit"
                                            name="action_remove">{% trans 'Remove' %}</button>
                                </div>

                            </fieldset>
                        </form>

                    {% else %}
                        <p class="card-text">
                            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 %}
                </div>
            </div>

            {% if can_add_email %}
                <div class="card">
                    <div class="card-body border-bottom">
                        <p class="card-title mb-0">{% trans "Add email address" %}</p>
                    </div>
                    <div class="card-body">

                        <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>
            {% endif %}
        </div>
    </div>

{% endblock %}


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