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

{% block title %}{% translate "Sign Out" %}{% 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>
                        <a href="{% url 'account_email' %}" class="list-group-item list-group-item-action border-0 py-3">
                            <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>
                      
                        {# Highlight the current page (Sign Out) as active #}
                        <a href="{% url 'account_logout' %}" class="list-group-item list-group-item-action active border-0 rounded-bottom-4 py-3" style="background-color: #fce8e8; color: #dc3545; font-weight: 500;" aria-current="true">
                            <i class="fas fa-sign-out-alt me-2"></i> {% translate "Sign Out" %}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {# ------------------- RIGHT COLUMN: LOGOUT CONFIRMATION ------------------- #}
        <div class="col-md-8 col-lg-9">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-body p-4 text-center">
                    
                    <i class="fas fa-sign-out-alt text-danger mb-4" style="font-size: 3rem;"></i>
                    <h4 class="fw-bold mb-3">{% translate "Confirm Sign Out" %}</h4>
                    
                    <p class="lead mb-4">{% translate "Are you sure you want to sign out of your account?" %}</p>

                    <form method="post" action="{% url 'account_logout' %}">
                        {% csrf_token %}
                        
                        {% if redirect_field_value %}
                            <input type="hidden"
                                   name="{{ redirect_field_name }}"
                                   value="{{ redirect_field_value }}" />
                        {% endif %}
                        
                        <div class="d-flex justify-content-center gap-3 mt-4">
                            {# Sign Out button in danger color #}
                            <button class="btn btn-danger btn-lg px-5" type="submit">
                                {% translate "Sign Out" %}
                            </button>
                            
                            {# Cancel/Go Back button with outline #}
                            <a class="btn btn-outline-secondary btn-lg px-5" href="{% url 'account_email' %}">
                                {% translate "Cancel" %}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}