{% extends 'dlux/base.html' %}
{% load django_tables2 %}
{% load crispy_forms_tags %}
{% load static %}
{% load dlux_tags %}

{% block title %}{{ DLUX_STRINGS.profile }}{% endblock %}

{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'dlux/users/css/profile.css' %}?v=20260612c">
    {% include "dlux/forms/assets_head.html" %}
{% endblock %}

{% block content %}

<div class="row justify-content-center">
    <div class="col-lg-12">
        <div class="glass-profile">
            <h1 class="page-title text-center display-6">
                <i class="bi bi-person-circle me-2"></i> {{ DLUX_STRINGS.profile }}
            </h1>

            {% if force_password_change_required %}
            <div class="alert alert-warning d-flex flex-column flex-sm-row align-items-sm-center gap-3 mb-4" role="alert" data-autoclose="false">
                <div class="d-flex align-items-center gap-2 flex-grow-1">
                    <i class="bi bi-shield-lock-fill fs-4"></i>
                    <div>
                        <div class="fw-bold">{{ DLUX_STRINGS.force_password_change_required }}</div>
                        <div class="small">{{ DLUX_STRINGS.force_password_change_required_detail }}</div>
                    </div>
                </div>
                <button type="button" class="btn btn-sm btn-danger rounded-pill flex-shrink-0" data-bs-toggle="modal" data-bs-target="#resetPasswordModal">
                    <i class="bi bi-key me-1"></i>{{ DLUX_STRINGS.btn_change_password }}
                </button>
            </div>
            {% endif %}

            <div class="row align-items-start">
                <!-- Info Section -->
                <div class="col-md-8 pe-md-4">
                    
                    <!-- Completeness -->
                    {% if profile_show_completion %}
                    <div class="completeness-container">
                        <div class="completeness-label">
                            <span>{{ DLUX_STRINGS.profile_completeness }}</span>
                            <span>{{ stats.completeness }}%</span>
                        </div>
                        <div class="progress progress-custom">
                            <div class="progress-bar bg-success" role="progressbar" data-inline-width="{{ stats.completeness }}%" aria-valuenow="{{ stats.completeness }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Info Grid -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="mb-2">
                                <div class="info-label">{{ DLUX_STRINGS.tbl_username }}</div>
                                <div class="info-value">{{ user.username }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-2">
                                <div class="info-label">{{ DLUX_STRINGS.tbl_email }}</div>
                                <div class="info-value">{{ user.email|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-2">
                                <div class="info-label">{{ DLUX_STRINGS.tbl_phone }}</div>
                                <div class="info-value">{{ user.profile.phone|default:"-" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-2">
                                <div class="info-label">{{ DLUX_STRINGS.role_type }}</div>
                                <div class="info-value">
                                    {{ current_user_management_tier.title }}
                                    {% if current_user_management_tier.can_delegate_staff %}
                                        <span class="badge bg-light text-primary border ms-1">{{ current_user_management_tier.delegation_badge_label }}</span>
                                    {% endif %}
                                    <div class="small text-muted mt-1">{{ current_user_management_tier.description }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-2">
                                <div class="info-label">{{ DLUX_STRINGS.date_joined }}</div>
                                <div class="info-value fs-6 text-dark">{{ user.date_joined|date }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-2">
                                <div class="info-label">{{ DLUX_STRINGS.tbl_last_login }}</div>
                                <div class="info-value fs-6 text-dark">{% dlux_timesince user.last_login %}</div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Profile Image Section -->
                <div class="col-md-4 text-center mb-4 mb-md-0 border-start ps-md-4">
                    <div class="profile-img-container mb-3">
                        {% if user.profile.profile_picture %}
                            <img src="{{ user.profile.profile_picture.url }}" alt="Profile Image">
                        {% else %}
                            <img src="{% static 'img/default_profile.webp' %}" alt="Profile Image">
                        {% endif %}
                    </div>
                    <h3 class="fw-bold text-dark mb-1">
                        {{ user.profile.full_name }} 
                        {% if user.is_active %}<i class="bi bi-check-circle-fill text-success fs-5" title="{{ DLUX_STRINGS.account_active }}"></i>{% endif %}
                    </h3>
                    <div class="mb-3">
                        <span class="badge {{ current_user_management_tier.badge_classes }} badge-role">
                            <i class="bi {{ current_user_management_tier.icon }} me-1"></i>{{ current_user_management_tier.title }}
                        </span>
                        {% if current_user_management_tier.can_delegate_staff %}
                            <span class="badge bg-light text-primary border badge-role ms-1">{{ current_user_management_tier.delegation_badge_label }}</span>
                        {% endif %}
                        {% if user.public_registration %}
                            <span class="badge bg-light text-primary border badge-role ms-1">
                                <i class="bi bi-person-plus me-1"></i>{{ DLUX_STRINGS.account_source_public|default:"Public signup" }}
                            </span>
                        {% endif %}
                    </div>
                    
                    <!-- Account Health (security nudge) -->
                    {% if profile_security_nudges != 'off' %}
                    <div class="mt-4 p-3 rounded bg-light border">
                        <small class="text-muted d-block mb-1">{{ DLUX_STRINGS.account_health }}</small>
                        {% if stats.health == 'good' %}
                            <div class="d-flex align-items-center justify-content-center gap-2 text-success fw-bold">
                                <i class="bi bi-heart-pulse-fill"></i> {{ DLUX_STRINGS.account_health_good }}
                            </div>
                        {% else %}
                            <div class="d-flex align-items-center justify-content-center gap-2 text-warning fw-bold">
                                <i class="bi bi-exclamation-triangle-fill"></i> {{ DLUX_STRINGS.account_health_attention }}
                            </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>

                    <!-- 2FA Section -->
                    <div class="glass-card mb-4 p-3">
                        <div class="d-flex flex-column-reverse flex-sm-row align-items-center mb-3 gap-3 gap-sm-0">
                            <!-- Icon + Text Wrapper -->
                            <div class="d-flex align-items-center">
                                <div class="bg-dark rounded-circle p-2 me-3">
                                    <i class="bi bi-shield-lock-fill text-light"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0">{{ DLUX_STRINGS.2fa_title }}</h5>
                                    <p class="small mb-0">{{ DLUX_STRINGS.2fa_desc }}</p>
                                </div>
                            </div>
                            
                            <!-- Action Buttons -->
                            <div class="ms-sm-auto d-flex gap-2">
                                <!-- <a href="{{ APP_CONFIG.home_url }}" class="btn btn-sm btn-light rounded-pill border action-btn" title="{{ DLUX_STRINGS.btn_home }}">
                                    <i class="bi bi-house-door"></i> {{ DLUX_STRINGS.btn_home }}
                                </a> -->
                                <button type="button" class="btn btn-sm btn-info rounded-pill action-btn" data-dynamic-modal="{% url 'user_report_modal' request.user.pk %}" data-modal-title="{{ DLUX_STRINGS.user_report_title }}" title="{{ DLUX_STRINGS.user_report_title }}">
                                    <i class="bi bi-file-earmark-person"></i> {{ DLUX_STRINGS.user_report_title }}
                                </button>
                                <button type="button" class="btn btn-sm btn-success rounded-pill action-btn" data-dynamic-modal="{% url 'modal_profile_edit' pk=user.pk %}" data-modal-title="{{ DLUX_STRINGS.btn_edit_profile|default:'Edit Profile' }}" title="{{ DLUX_STRINGS.btn_update_data }}">
                                    <i class="bi bi-pencil-square"></i> {{ DLUX_STRINGS.btn_edit }}
                                </button>
                                <button type="button" class="btn btn-sm btn-danger rounded-pill action-btn" data-bs-toggle="modal" data-bs-target="#resetPasswordModal" title="{{ DLUX_STRINGS.btn_change_password }}">
                                    <i class="bi bi-key"></i> {{ DLUX_STRINGS.btn_change_password }}
                                </button>
                            </div>
                        </div>

                        <div class="list-group list-group-flush bg-transparent">
                            <!-- Email 2FA -->
                            {% if config_2fa.email %}
                            <div class="list-group-item bg-transparent d-flex flex-row justify-content-between align-items-center px-0 security-method-row">
                                <div>
                                    <i class="bi bi-envelope mx-2"></i> {{ DLUX_STRINGS.2fa_method_email }}
                                </div>
                                <div>
                                    {% if user.profile.is_email_2fa_enabled %}
                                        <span class="badge bg-success me-2">{{ DLUX_STRINGS.status_enabled }}</span>
                                        <button class="btn btn-sm btn-outline-danger disable-2fa-btn"
                                                data-method="email" 
                                                data-url="{% url 'disable_2fa' %}"
                                                data-confirm-msg="{{ DLUX_STRINGS.msg_confirm_disable_2fa }}">
                                            <span class="btn-label">{{ DLUX_STRINGS.2fa_disable }}</span>
                                            <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                                        </button>
                                    {% else %}
                                        <button class="btn btn-sm btn-primary setup-2fa-btn"
                                                data-method="email"
                                                data-url="{% url 'enable_2fa' %}"
                                                data-email="{{ user.email|default:'' }}">
                                            <span class="btn-label">{{ DLUX_STRINGS.enable }}</span>
                                            <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}

                            <!-- Phone 2FA -->
                            {% if config_2fa.phone %}
                            <div class="list-group-item bg-transparent d-flex flex-row justify-content-between align-items-center px-0 security-method-row">
                                <div>
                                    <i class="bi bi-phone mx-2"></i> {{ DLUX_STRINGS.2fa_method_phone }}
                                </div>
                                <div>
                                    {% if user.profile.is_phone_2fa_enabled %}
                                        <span class="badge bg-success me-2">{{ DLUX_STRINGS.status_enabled }}</span>
                                        <button class="btn btn-sm btn-outline-danger disable-2fa-btn" 
                                                data-method="phone" 
                                                data-url="{% url 'disable_2fa' %}"
                                                data-confirm-msg="{{ DLUX_STRINGS.msg_confirm_disable_2fa }}">
                                            <span class="btn-label">{{ DLUX_STRINGS.2fa_disable }}</span>
                                            <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                                        </button>
                                    {% else %}
                                        <button class="btn btn-sm btn-primary setup-2fa-btn" data-method="phone" data-url="{% url 'enable_2fa' %}">
                                            <span class="btn-label">{{ DLUX_STRINGS.enable }}</span>
                                            <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}

                            <!-- TOTP 2FA -->
                            {% if config_2fa.totp %}
                            <div class="list-group-item bg-transparent d-flex flex-row justify-content-between align-items-center px-0 security-method-row">
                                <div>
                                    <i class="bi bi-app-indicator mx-2"></i> {{ DLUX_STRINGS.2fa_method_totp }}
                                </div>
                                <div>
                                    {% if user.profile.is_totp_2fa_enabled %}
                                        <span class="badge bg-success me-2">{{ DLUX_STRINGS.status_enabled }}</span>
                                        <button class="btn btn-sm btn-outline-danger disable-2fa-btn" 
                                                data-method="totp" 
                                                data-url="{% url 'disable_2fa' %}"
                                                data-confirm-msg="{{ DLUX_STRINGS.msg_confirm_disable_2fa }}">
                                            <span class="btn-label">{{ DLUX_STRINGS.2fa_disable }}</span>
                                            <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                                        </button>
                                    {% else %}
                                        <button class="btn btn-sm btn-primary setup-2fa-btn" data-method="totp" data-url="{% url 'setup_totp' %}">
                                            <span class="btn-label">{{ DLUX_STRINGS.enable }}</span>
                                            <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}
                            
                            <!-- Backup Codes (Only if 2FA enabled) -->
                            {% if user.profile.is_2fa_enabled %}
                            <div class="list-group-item bg-transparent d-flex flex-row justify-content-between align-items-center px-0 security-method-row">
                                <div>
                                    <i class="bi bi-safe mx-2"></i> {{ DLUX_STRINGS.2fa_method_backup }}
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-outline-warning mx-2" 
                                            id="generateBackupCodesBtn" 
                                            data-url="{% url 'generate_backup_codes' %}"
                                            data-confirm-msg="{{ DLUX_STRINGS.msg_confirm_generate_backup }}">
                                        <i class="bi bi-arrow-clockwise"></i> {{ DLUX_STRINGS.btn_generate_new }}
                                        <span class="spinner-border spinner-border-sm d-none ms-1" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    {% if profile_show_devices %}
                    <!-- Signed-in Devices -->
                    <div class="glass-card mb-4 p-3">
                        <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-2 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-dark rounded-circle p-2 me-3">
                                    <i class="bi bi-laptop text-light"></i>
                                </div>
                                <div>
                                    <h5 class="mb-0">{{ DLUX_STRINGS.signed_in_devices }}</h5>
                                    <p class="small mb-0 text-muted">{{ DLUX_STRINGS.signed_in_devices_desc }}</p>
                                </div>
                            </div>
                            <span class="badge bg-light text-dark border ms-sm-auto">{{ active_sessions|length }} {{ DLUX_STRINGS.active_sessions }}</span>
                        </div>

                        <div class="profile-session-list">
                            {% for session in active_sessions %}
                                <div class="profile-session-row{% if session.is_current %} is-current{% endif %}">
                                    <div class="profile-session-icon">
                                        <i class="bi {% if session.is_current %}bi-display{% else %}bi-window-sidebar{% endif %}"></i>
                                    </div>
                                    <div class="profile-session-main">
                                        <div class="d-flex align-items-center gap-2 flex-wrap">
                                            <strong>{{ session.device_label }}</strong>
                                            {% if session.is_current %}
                                                <span class="badge bg-success-subtle text-success border">{{ DLUX_STRINGS.current_session }}</span>
                                            {% endif %}
                                            {% if session.is_trusted %}
                                                <span class="badge bg-light text-primary border">{{ DLUX_STRINGS.trusted_device_badge }}</span>
                                            {% endif %}
                                        </div>
                                        <div class="profile-session-meta">
                                            {% if session.ip_address %}
                                                <span><i class="bi bi-globe2 me-1"></i>{{ session.ip_address }}</span>
                                            {% endif %}
                                            {% if session.last_seen %}
                                                <span><i class="bi bi-clock me-1"></i>{% dlux_timesince session.last_seen %}</span>
                                            {% endif %}
                                            {% if session.trusted_until %}
                                                <span><i class="bi bi-shield-check me-1"></i>{{ DLUX_STRINGS.trusted_until }} {{ session.trusted_until|date:"Y-m-d H:i" }}</span>
                                            {% endif %}
                                            <span><i class="bi bi-hourglass-split me-1"></i>{{ DLUX_STRINGS.session_expires }} {{ session.expire_date|date:"Y-m-d H:i" }}</span>
                                        </div>
                                        {% if session.user_agent %}
                                            <div class="profile-session-agent" title="{{ session.user_agent }}">{{ session.user_agent }}</div>
                                        {% endif %}
                                    </div>
                                    <div class="profile-session-action">
                                        {% if session.is_current %}
                                            {% if session.is_trusted %}
                                                <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill" disabled>
                                                    {{ DLUX_STRINGS.current }}
                                                </button>
                                            {% else %}
                                                <form method="post"
                                                      action="{% url 'trust_current_device' %}"
                                                      class="profile-session-trust-form"
                                                      data-confirm-msg="{{ DLUX_STRINGS.msg_confirm_trust_current_device }}">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="current_password" value="">
                                                    <button type="submit" class="btn btn-sm btn-outline-primary rounded-pill">
                                                        <i class="bi bi-shield-plus me-1"></i>{{ DLUX_STRINGS.trust_this_device }}
                                                    </button>
                                                </form>
                                            {% endif %}
                                        {% elif session.can_revoke %}
                                            <form method="post"
                                                  action="{% url 'revoke_profile_session' session.session_key %}"
                                                  class="profile-session-revoke-form"
                                                  data-confirm-msg="{{ DLUX_STRINGS.msg_confirm_sign_out_session }}">
                                                {% csrf_token %}
                                                <input type="hidden" name="current_password" value="">
                                                <button type="submit" class="btn btn-sm btn-outline-danger rounded-pill">
                                                    <i class="bi bi-box-arrow-right me-1"></i>{{ DLUX_STRINGS.sign_out }}
                                                </button>
                                            </form>
                                        {% else %}
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-secondary rounded-pill"
                                                    data-dlux-tooltip="{{ DLUX_STRINGS.session_revoke_trusted_denied }}"
                                                    disabled>
                                                <i class="bi bi-shield-lock me-1"></i>{{ DLUX_STRINGS.protected }}
                                            </button>
                                        {% endif %}
                                    </div>
                                </div>
                            {% empty %}
                                <div class="profile-session-empty">
                                    <i class="bi bi-info-circle me-1"></i>{{ DLUX_STRINGS.no_active_sessions }}
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                    {% endif %}

                    <!-- Stats Cards -->
                    <div class="row g-3 mb-4">
                        <div class="col-6 col-lg-3">
                            <div class="stats-card text-center">
                                <div class="stats-icon text-primary">
                                    <i class="bi bi-lightning-charge"></i>
                                </div>
                                <div class="stats-value">{{ stats.total_actions }}</div>
                                <div class="stats-label">{{ DLUX_STRINGS.stats_total_actions|default:"Total Actions" }}</div>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3">
                            <div class="stats-card text-center">
                                <div class="stats-icon text-primary">
                                    <i class="bi bi-file-earmark-plus"></i>
                                </div>
                                <div class="stats-value">{{ stats.docs_created }}</div>
                                <div class="stats-label">{{ DLUX_STRINGS.stats_docs_created|default:"Docs Created" }}</div>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3">
                            <div class="stats-card text-center">
                                <div class="stats-icon text-primary">
                                    <i class="bi bi-pencil-square"></i>
                                </div>
                                <div class="stats-value">{{ stats.total_edits }}</div>
                                <div class="stats-label">{{ DLUX_STRINGS.stats_edits|default:"Edits" }}</div>
                            </div>
                        </div>
                        <div class="col-6 col-lg-3">
                            <div class="stats-card text-center">
                                <div class="stats-icon text-primary">
                                    <i class="bi bi-download"></i>
                                </div>
                                <div class="stats-value">{{ stats.total_downloads }}</div>
                                <div class="stats-label">{{ DLUX_STRINGS.stats_downloads|default:"Downloads" }}</div>
                            </div>
                        </div>
                    </div>


    
                    </div>

                    {% if profile_show_activity %}
                    <!-- Timelines -->
                    <div class="row g-4">
                        <!-- Recent Activity -->
                        <div class="col-lg-6">
                            <h5 class="fw-bold mb-3 text-secondary"><i class="bi bi-clock-history me-2"></i> {{ DLUX_STRINGS.stats_recent_activity }}</h5>
                            {% if recent_activity %}
                                {% load dlux_translation %}
                                <div class="activity-timeline">
                                    {% for log in recent_activity %}
                                    <div class="timeline-item">
                                        <div class="timeline-dot"></div>
                                        <div class="timeline-content">
                                            <div class="timeline-time">{% dlux_timesince log.timestamp %}</div>
                                            <div class="timeline-title">
                                                {{ log.action|translate_log:'action' }} - 
                                                {% if log.model_name %}
                                                    {{ log.model_name|translate_log:'model' }}
                                                {% else %}
                                                    General
                                                {% endif %}
                                            </div>
                                            {% format_log_details log.details as details_html %}
                                            {% if details_html %}
                                                <div class="mt-1 small">{{ details_html|safe }}</div>
                                            {% else %}
                                                <small class="text-muted">{{ log.object_id|default:"-" }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p class="text-muted small">{{ DLUX_STRINGS.timeline_empty }}</p>
                            {% endif %}
                        </div>

                        <!-- System Interactions -->
                        <div class="col-lg-6">
                            <h5 class="fw-bold mb-3 text-secondary"><i class="bi bi-cpu me-2"></i> {{ DLUX_STRINGS.stats_system_interactions }}</h5>
                            {% if system_interactions %}
                                {% load dlux_translation %}
                                <div class="activity-timeline">
                                    {% for log in system_interactions %}
                                    <div class="timeline-item">
                                        <div class="timeline-dot timeline-dot--system"></div>
                                        <div class="timeline-content">
                                            <div class="timeline-time">{% dlux_timesince log.timestamp %}</div>
                                            <div class="timeline-title">
                                                {{ log.action|translate_log:'action' }}
                                                {% if log.model_name %}
                                                    {{ log.model_name|translate_log:'model' }}
                                                {% else %}
                                                    General
                                                {% endif %}
                                            </div>
                                            {% format_log_details log.details as sys_details_html %}
                                            {% if sys_details_html %}
                                                <div class="mt-1 small">{{ sys_details_html|safe }}</div>
                                            {% else %}
                                                <small class="text-muted">{{ log.ip_address }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <p class="text-muted small">{{ DLUX_STRINGS.timeline_empty }}</p>
                            {% endif %}
                        </div>
                    </div>

                    {% endif %}

                    <!-- Actions (Removed - Moved to 2FA Card) -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Change Password Modal -->
<!-- ... existing modal ... -->

<!-- Backup Codes Modal -->
<div class="modal fade" id="backupCodesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-card border-0">
            <div class="modal-header border-0">
                <h5 class="modal-title">{{ DLUX_STRINGS.backup_codes_title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ DLUX_STRINGS.btn_close }}"></button>
            </div>
            <div class="modal-body text-center">
                <div class="alert alert-warning small text-start">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i> 
                    {{ DLUX_STRINGS.backup_codes_warning }}
                </div>
                
                <div class="p-3 rounded mb-3 border font-monospace profile-code-shell" id="backupCodesContainer">
                    <!-- Codes injected here -->
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{{ DLUX_STRINGS.loading }}</span>
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-outline-primary" id="downloadBackupCodesBtn">
                        <i class="bi bi-download"></i> {{ DLUX_STRINGS.btn_download_txt }}
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ DLUX_STRINGS.btn_close }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 2FA Setup Modal (Moved to root level) -->
<div class="modal fade" id="otpSetupModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-card border-0">
            <div class="modal-header border-0">
                <h5 class="modal-title">{{ DLUX_STRINGS.2fa_verify_title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ DLUX_STRINGS.btn_close }}"></button>
            </div>
            <div class="modal-body text-center">
                <div class="mb-3">
                    <i class="bi bi-shield-lock-fill profile-setup-icon"></i>
                </div>
                
                <p class="text-white-50 mb-4" id="otp-instruction">{{ DLUX_STRINGS.2fa_verify_desc }}</p>
                
                <div id="totp-qr-container" class="mb-4 d-none"></div>

                <div id="otpSetupError" class="alert alert-danger d-none"></div>

                <div id="email2faConfirm" class="text-start d-none">
                    <label for="email2faAddressInput" class="form-label">
                        {{ DLUX_STRINGS.2fa_confirm_email_label }}
                    </label>
                    <input type="email"
                           class="form-control form-control-lg"
                           id="email2faAddressInput"
                           autocomplete="email"
                           placeholder="name@example.com">
                    <p class="small text-muted mt-2 mb-3">
                        {{ DLUX_STRINGS.2fa_confirm_email_help }}
                    </p>
                    <button type="button" class="btn btn-primary w-100" id="email2faConfirmBtn">
                        <span class="btn-label">{{ DLUX_STRINGS.2fa_confirm_email_send }}</span>
                        <span class="spinner-border spinner-border-sm d-none" aria-hidden="true"></span>
                    </button>
                </div>

                <form id="otpSetupForm" 
                    data-url="{% url 'verify_otp_enable' %}" 
                    data-csrf="{{ csrf_token }}"
                    data-trans-verify-title="{{ DLUX_STRINGS.2fa_verify_title }}"
                    data-trans-confirm-email-title="{{ DLUX_STRINGS.2fa_confirm_email_title }}"
                    data-trans-confirm-email-instruction="{{ DLUX_STRINGS.2fa_confirm_email_instruction }}"
                    data-trans-invalid-email="{{ DLUX_STRINGS.2fa_invalid_email }}"
                    data-trans-scan-instruction="{{ DLUX_STRINGS.totp_scan_instruction }}"
                    data-trans-otp-sent="{{ DLUX_STRINGS.otp_sent_instruction }}"
                    data-trans-recovery-codes="{{ DLUX_STRINGS.2fa_method_backup }}">
                    <input type="hidden" id="otpMethodInput" name="method" value="">
                    
                    <div class="mb-3">
                        <input type="text" 
                                class="form-control form-control-lg text-center fw-bold dlux-otp-code-input" 
                                id="otpSetupInput" 
                                name="otp_code" 
                                placeholder="######" 
                                maxlength="6" 
                                required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">
                        {{ DLUX_STRINGS.2fa_verify_btn }}
                    </button>
                </form>

                <!-- Hidden Backup Codes Section for First-Time Setup -->
                <div id="otpSetupSuccess" class="d-none text-start">
                    <div class="alert alert-success text-center mb-3">
                        <i class="bi bi-check-circle-fill me-2"></i> {{ DLUX_STRINGS.2fa_enabled_success }}
                    </div>
                    
                    <div class="alert alert-warning small">
                        <i class="bi bi-exclamation-triangle-fill me-1"></i> 
                        {{ DLUX_STRINGS.backup_codes_warning }}
                    </div>

                    <div class="p-3 rounded mb-3 border font-monospace text-center profile-code-shell" id="otpSetupBackupCodesContainer">
                        <!-- Codes injected here -->
                    </div>

                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary" id="downloadSetupBackupCodesBtn">
                            <i class="bi bi-download"></i> {{ DLUX_STRINGS.btn_download_txt }}
                        </button>
                        <button type="button" class="btn btn-secondary" id="confirmCodesSavedBtn" data-bs-dismiss="modal">
                            {{ DLUX_STRINGS.btn_close_reload }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Change Password Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true"{% if password_form.errors %} data-dlux-open-on-load="true"{% endif %}>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-card border-0">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold text-primary" id="resetPasswordModalLabel">
                    <i class="bi bi-key me-2"></i> {{ DLUX_STRINGS.btn_change_password }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 dlux-form">
                <form method="post" class="dlux-form">
                    {% csrf_token %}
                    {{ password_form|crispy }}
                    <div class="d-grid mt-4">
                        <button type="submit" name="change_password" class="btn btn-danger action-btn rounded-pill justify-content-center">
                            {{ DLUX_STRINGS.btn_confirm_password_change }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Generic Confirmation Modal -->
<div class="modal fade profile-confirmation-modal" id="confirmationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content glass-card border-0">
            <div class="modal-body text-center p-4">
                <i class="bi bi-exclamation-circle text-warning display-4 mb-3"></i>
                <h5 class="mb-2 profile-confirmation-title">{{ DLUX_STRINGS.modal_confirm_title }}</h5>
                <p class="small mb-4 profile-confirmation-copy" id="confirmationMessage">{{ DLUX_STRINGS.modal_confirm_msg }}</p>
                <div id="confirmationPasswordWrap" class="d-none text-start mb-3">
                    <label for="confirmationPasswordInput" class="form-label">{{ DLUX_STRINGS.form_old_password }}</label>
                    <input type="password"
                           class="form-control"
                           id="confirmationPasswordInput"
                           autocomplete="current-password"
                           data-required-msg="{{ DLUX_STRINGS.current_password_required }}">
                    <div class="form-text">{{ DLUX_STRINGS.current_password_prompt }}</div>
                    <div class="text-danger small mt-2 d-none" id="confirmationPasswordError"></div>
                </div>
                <div class="d-flex justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">{{ DLUX_STRINGS.cancel }}</button>
                    <button type="button" class="btn btn-primary btn-sm px-4" id="confirmationConfirmBtn">{{ DLUX_STRINGS.confirm }}</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script src="{% static 'dlux/users/js/profile_2fa.js' %}?v=20260619a" nonce="{{ request.csp_nonce }}"></script>
{% endblock %}