{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Manage Email Addresses" %}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Email Addresses -->
            <div class="card shadow-lg border-0 rounded-4 mb-4">
                <div class="card-header bg-primary text-white py-3">

                    <h3 class="mb-0">
                        <i class="bi bi-envelope-fill me-2"></i>
                        {% trans "Email Addresses" %}
                    </h3>

                </div>

                <div class="card-body">
                    {% if emailaddresses %}
                        <p class="text-muted mb-4">
                            {% trans "The following email addresses are associated with your account." %}
                        </p>
                        <form method="post" action="{% url 'account_email' %}">

                            {% csrf_token %}

                            {% for radio in emailaddress_radios %}
                                {% with email=radio.emailaddress %}

                                <div class="card mb-3 border">

                                    <div class="card-body">

                                        <div class="form-check">

                                            <input
                                                class="form-check-input"
                                                type="radio"
                                                name="email"
                                                id="{{ radio.id }}"
                                                value="{{ email.email }}"
                                                {% if radio.checked %}checked{% endif %}>

                                            <label
                                                class="form-check-label w-100"
                                                for="{{ radio.id }}">

                                                <div class="d-flex justify-content-between align-items-center flex-wrap">

                                                    <div>

                                                        <strong>{{ email.email }}</strong>

                                                    </div>

                                                    <div>

                                                        {% if email.primary %}
                                                            <span class="badge bg-primary">
                                                                {% trans "Primary" %}
                                                            </span>
                                                        {% endif %}

                                                        {% if email.verified %}
                                                            <span class="badge bg-success">
                                                                {% trans "Verified" %}
                                                            </span>
                                                        {% else %}
                                                            <span class="badge bg-warning text-dark">
                                                                {% trans "Unverified" %}
                                                            </span>
                                                        {% endif %}

                                                    </div>

                                                </div>

                                            </label>

                                        </div>

                                    </div>

                                </div>

                                {% endwith %}
                            {% endfor %}

                            <div class="d-flex flex-wrap gap-2 mt-4">

                                <button
                                    class="btn btn-primary"
                                    type="submit"
                                    name="action_primary">

                                    <i class="bi bi-star-fill me-1"></i>

                                    {% trans "Make Primary" %}

                                </button>

                                <button
                                    class="btn btn-outline-secondary"
                                    type="submit"
                                    name="action_send">

                                    <i class="bi bi-envelope-check me-1"></i>

                                    {% trans "Resend Verification" %}

                                </button>

                                <button
                                    class="btn btn-outline-danger"
                                    type="submit"
                                    name="action_remove">

                                    <i class="bi bi-trash me-1"></i>

                                    {% trans "Remove Email" %}

                                </button>

                            </div>

                        </form>

                    {% else %}

                        <div class="alert alert-warning">

                            <i class="bi bi-exclamation-triangle-fill me-2"></i>

                            {% trans "You do not currently have any email addresses associated with your account." %}

                        </div>

                    {% endif %}

                </div>

            </div>

            {% if can_add_email %}

            <!-- Add Email -->

            <div class="card shadow-lg border-0 rounded-4">

                <div class="card-header bg-success text-white py-3">

                    <h4 class="mb-0">

                        <i class="bi bi-envelope-plus-fill me-2"></i>

                        {% trans "Add Email Address" %}

                    </h4>

                </div>

                <div class="card-body">

                    <form method="post"
                          action="{% url 'account_email' %}">

                        {% csrf_token %}

                        {{ form|crispy }}

                        <div class="d-grid mt-4">

                            <button
                                class="btn btn-success btn-lg"
                                type="submit"
                                name="action_add">

                                <i class="bi bi-plus-circle me-2"></i>

                                {% trans "Add Email Address" %}

                            </button>

                        </div>

                    </form>

                </div>

            </div>

            {% endif %}

        </div>

    </div>

</div>
{% endblock %}

{% block extra_body %}

<script src="{% static 'account/js/account.js' %}"></script>

<script src="{% static 'account/js/onload.js' %}"></script>

<script
    data-allauth-onload="allauth.account.forms.manageEmailForm"
    type="application/json">
{
    "i18n": {
        "confirmDelete": "{% trans 'Do you really want to remove the selected email address?' %}"
    }
}
</script>

{% endblock %}