{% 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 ------------------- #}
        <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 #}
                        {# NOTE: You will need to replace 'user_detail' with your actual profile URL name #}
                        <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>

                    {# Django Messages for Success/Error feedback #}
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} mt-3" role="alert">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                    
                    {% 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 #}
                                    {% 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 (Uses 'action_primary') #}
                                    {% if not emailaddress.primary %}
                                        <form method="post" action="{% url 'account_email' %}" class="d-inline">
                                            {% csrf_token %}
                                            <input type="hidden" name="email" value="{{ emailaddress.email }}" />
                                            <button type="submit" name="action_primary" class="btn btn-sm btn-outline-primary">{% translate "Make Primary" %}</button>
                                        </form>
                                    {% endif %}

                                    {# 2. RESEND VERIFICATION ACTION (Uses 'action_send') #}
                                    {% if not emailaddress.verified %}
                                        <form method="post" action="{% url 'account_email' %}" class="d-inline">
                                            {% csrf_token %}
                                            <input type="hidden" name="email" value="{{ emailaddress.email }}" />
                                            <button type="submit" name="action_send" class="btn btn-sm btn-outline-warning">{% translate "Re-send Verification" %}</button>
                                        </form>
                                    {% endif %}
                                    
                                    {# 3. REMOVE ACTION (Uses 'action_remove') #}
                                    {% if not emailaddress.primary %}
                                        <form method="post" action="{% url 'account_email' %}" class="d-inline">
                                            {% csrf_token %}
                                            <input type="hidden" name="email" value="{{ emailaddress.email }}" />
                                            <button type="submit" name="action_remove" 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 (The form that failed previously) ------------------- #}
                    {% if can_add_email %}
                        <h5 class="fw-bold mb-3">{% translate "Add Email Address" %}</h5>
                        <form method="post" action="{% url 'account_email' %}" class="add_email">
                            {% csrf_token %}
                            
                            {# Ensure non-field errors are displayed (e.g., "Email already registered") #}
                            {% if form.non_field_errors %}
                                <div class="alert alert-danger" role="alert">
                                    {{ form.non_field_errors }}
                                </div>
                            {% endif %}
                            
                            {# Crispy renders the form fields (including new_email) #}
                            {{ form|crispy }}
                            
                            {# The button name is crucial for the allauth view to recognize the "Add" action #}
                            <button class="btn btn-success mt-3" type="submit" name="action_add" style="background-color: #008080; border-color: #008080;">{% translate "Add Email" %}</button>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}