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

{% block title %}{% translate "Email Addresses" %}{% endblock %}

{% block content %}
<div class="container my-5">
    
    <div class="row mb-4">
        <div class="col">
            <h3 class="fw-bold">{% translate "Account Settings" %}</h3>
            <p class="text-muted">{% translate "Manage your personal details and security." %}</p>
        </div>
    </div>
    
    <div class="row">
        
        {# ------------------- LEFT COLUMN: ACCOUNT MENU (New Card Style) ------------------- #}
        <div class="col-md-4 col-lg-3 mb-4">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-0">
                    <div class="list-group list-group-flush rounded-4">
                        {# Assuming a main 'Profile' or 'Personal Information' page exists #}
                        <a href="{% url 'user_detail' user.pk %}" class="list-group-item list-group-item-action border-0 rounded-top-4 py-3">
                            <i class="fas fa-user-circle me-2"></i> {% translate "Personal Information" %}
                        </a>
                        
                        {# Highlight the current page (Email) as active #}
                        <a href="{% url 'account_email' %}" class="list-group-item list-group-item-action active border-0 py-3" style="background-color: #e6f3f3; color: #008080; font-weight: 500;" aria-current="true">
                            <i class="fas fa-envelope me-2"></i> {% translate "Email Addresses" %}
                        </a>
                        <a href="{% url 'account_change_password' %}" class="list-group-item list-group-item-action border-0 py-3">
                            <i class="fas fa-lock me-2"></i> {% translate "Change Password" %}
                        </a>
                       
                        <a href="{% url 'account_logout' %}" class="list-group-item list-group-item-action border-0 rounded-bottom-4 text-danger py-3">
                            <i class="fas fa-sign-out-alt me-2"></i> {% translate "Sign Out" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {# ------------------- RIGHT COLUMN: EMAIL MANAGEMENT ------------------- #}
        <div class="col-md-8 col-lg-9">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-4">
                    
                    <h5 class="fw-bold mb-3">{% translate "Email Addresses" %}</h5>
                    <p class="text-muted border-bottom pb-3">{% translate "These email addresses are linked to your account. You can set the primary address, resend verification, or remove an address." %}</p>

                    {% if emailaddresses %}
                        {% for emailaddress in emailaddresses %}
                            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center py-3 {% if not forloop.last %}border-bottom{% endif %}">
                                
                                <p class="mb-2 mb-sm-0 me-3">
                                    <span class="fw-bold text-dark">{{ emailaddress.email }}</span>
                                    
                                    {# Status Badges: Using rounded-pill and appropriate colors #}
                                    {% if emailaddress.primary %}
                                        <span class="badge rounded-pill bg-info text-dark ms-2">{% translate "Primary" %}</span>
                                    {% endif %}
                                    {% if emailaddress.verified %}
                                        <span class="badge rounded-pill bg-success ms-2">{% translate "Verified" %}</span>
                                    {% else %}
                                        <span class="badge rounded-pill bg-warning text-dark ms-2">{% translate "Unverified" %}</span>
                                    {% endif %}
                                </p>
                                
                                <div class="d-flex flex-wrap gap-2">
                                    
                                    {# 1. MAKE PRIMARY ACTION #}
                                    {% if not emailaddress.primary %}
                                        <form method="post" action="{% url 'account_email' %}" class="d-inline">
                                            {% csrf_token %}
                                            <input type="hidden" name="email" value="{{ emailaddress.email }}" />
                                            <input type="hidden" name="action" value="set_primary" />
                                            <button type="submit" class="btn btn-sm btn-outline-primary">{% translate "Make Primary" %}</button>
                                        </form>
                                    {% endif %}

                                    {# 2. RESEND VERIFICATION ACTION #}
                                    {% if not emailaddress.verified %}
                                        <form method="post" action="{% url 'account_email' %}" class="d-inline">
                                            {% csrf_token %}
                                            <input type="hidden" name="email" value="{{ emailaddress.email }}" />
                                            <input type="hidden" name="action" value="send" />
                                            <button type="submit" class="btn btn-sm btn-outline-warning">{% translate "Re-send Verification" %}</button>
                                        </form>
                                    {% endif %}
                                    
                                    {# 3. REMOVE ACTION #}
                                    {% if not emailaddress.primary %}
                                        <form method="post" action="{% url 'account_email' %}" class="d-inline">
                                            {% csrf_token %}
                                            <input type="hidden" name="email" value="{{ emailaddress.email }}" />
                                            <input type="hidden" name="action" value="remove" />
                                            <button type="submit" class="btn btn-sm btn-outline-danger">{% translate "Remove" %}</button>
                                        </form>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="alert alert-info mt-3">{% translate "No email addresses found." %}</p>
                    {% endif %}

                    <hr class="my-4">

                    {# ------------------- ADD EMAIL FORM ------------------- #}
                    <h5 class="fw-bold mb-3">{% translate "Add Email Address" %}</h5>
<form method="post" action="{% url 'account_email' %}">
    {% csrf_token %}
    
    {# 1. Explicitly render non-field errors first #}
    {% if form.non_field_errors %}
        <div class="alert alert-danger" role="alert">
            {% for error in form.non_field_errors %}
                {{ error }}
            {% endfor %}
        </div>
    {% endif %}

    {# 2. Render the fields using crispy #}
    {{ form|crispy }}
    
    {# 3. If there are any global errors (not common here, but safe to include) #}
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} mt-3">{{ message }}</div>
        {% endfor %}
    {% endif %}
    
    {# Teal/Dark Green button consistent with "Save Changes" #}
    <button class="btn btn-success mt-3" type="submit" style="background-color: #008080; border-color: #008080;">{% translate "Add Email" %}</button>
</form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}