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

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

{% block extra_head %}
    {% include "dlux/forms/assets_head.html" %}
    <link rel="stylesheet" href="{% static 'dlux/main/css/options.css' %}?v=20260630c">
{% endblock %}

{% block content %}
    <h2 class="page-title mb-4"><i class="bi bi-gear me-2"></i> {{ DLUX_STRINGS.options_title }}</h2>

    <div class="dlux-options-grid"
         id="dluxOptionsGrid"
         data-options-order-storage-key="dlux.options.card-order.v1">
        {% if show_system_diagnostics or user.is_superuser %}
        <!-- Admin Panel: combined system status + update + backup + system settings -->
        <div class="dlux-options-card dlux-admin-panel-card">
            <div class="glass-profile option-section dlux-options-panel dlux-admin-panel">
                <div class="dlux-admin-panel-heading">
                    <h4 class="mb-1"><i class="bi bi-shield-lock-fill me-2"></i> {{ DLUX_STRINGS.admin_panel_title|default:'Admin panel' }}</h4>
                    <p class="text-muted small mb-0">{{ DLUX_STRINGS.admin_panel_desc|default:'System status, updates, backups, and configuration.' }}</p>
                </div>
                <div class="dlux-admin-panel-top">
                    {% if show_system_diagnostics %}
                    <section class="dlux-admin-tile dlux-admin-tile--status">
                        <h5 class="dlux-admin-tile-title"><i class="bi bi-activity"></i> {{ DLUX_STRINGS.system_info }}</h5>
                        <div class="dlux-admin-stat-list">
                            <div class="dlux-admin-stat dlux-admin-stat--wide">
                                <span class="dlux-admin-stat-label">{{ DLUX_STRINGS.storage }}</span>
                                <div class="dlux-admin-stat-value">
                            <div class="d-flex dir-ltr-inline-end align-items-center gap-2 dlux-options-storage-row">
                                <span>{{ disk_used }}GB / {{ disk_total }}GB</span>
                                <div class="progress flex-shrink-0 dlux-options-storage-progress">
                                    <div class="progress-bar {% if disk_percent > 90 %}bg-danger{% elif disk_percent > 70 %}bg-warning{% else %}bg-success{% endif %}"
                                        role="progressbar" data-inline-width="{{ disk_percent }}%"
                                        aria-valuenow="{{ disk_percent }}" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                                </div>
                            </div>
                            <div class="dlux-admin-stat">
                                <span class="dlux-admin-stat-label">{{ DLUX_STRINGS.server_time }}</span>
                                <span class="dlux-admin-stat-value font-monospace dir-ltr-inline-end">{{ server_time_backend_display }}</span>
                            </div>
                            <div class="dlux-admin-stat">
                                <span class="dlux-admin-stat-label">{{ DLUX_STRINGS.python_version }}</span>
                                <span class="dlux-admin-stat-value font-monospace">{{ python_version }}</span>
                            </div>
                            <div class="dlux-admin-stat">
                                <span class="dlux-admin-stat-label">{{ DLUX_STRINGS.django_version }}</span>
                                <span class="dlux-admin-stat-value font-monospace">{{ django_version }}</span>
                            </div>
                        </div>
                        <details class="dlux-admin-details">
                            <summary>{{ DLUX_STRINGS.admin_panel_more_details|default:'More system details' }}</summary>
                            <div class="table-responsive dlux-options-system-info-table">
                                <table class="table table-sm table-borderless mb-0">
                    <tr>
                        <th>{{ DLUX_STRINGS.os_info }}:</th>
                        <td class="text-end">{{ os_info }}</td>
                    </tr>
                    {% if decrypter_version %}
                    <tr>
                        <th>{{ DLUX_STRINGS.decrypter_version }}:</th>
                        <td class="text-end font-monospace">{{ decrypter_version }}</td>
                    </tr>
                    {% endif %}
                    {% if drf_service %}
                    <tr>
                        <th>{{ DLUX_STRINGS.drf_version }}:</th>
                        <td class="text-end font-monospace">{{ drf_service.version }}</td>
                    </tr>
                    {% endif %}
                    {% if api_service %}
                    <tr>
                        <th>{{ DLUX_STRINGS.api_status }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                <span class="badge {{ api_service.badge_class }}" title="{{ api_service.note|default:'' }}">{{ api_service.label }}</span>
                            </div>
                            {% if api_service.url %}
                            <div class="small mt-1 text-break">
                                <a href="{{ api_service.url }}" target="_blank" rel="noopener" class="font-monospace text-decoration-none">{{ api_service.url }}</a>
                            </div>
                            {% endif %}
                            {% if api_service.note %}
                            <div class="small text-muted mt-1">{{ api_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% if db_service %}
                    <tr>
                        <th>{{ DLUX_STRINGS.database }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                <span class="font-monospace">{{ db_service.detail }}</span>
                                <span class="badge {{ db_service.badge_class }}" title="{{ db_service.note|default:'' }}">{{ db_service.label }}</span>
                            </div>
                            {% if db_service.note %}
                            <div class="small text-muted mt-1">{{ db_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% if cache_service %}
                    <tr>
                        <th>{{ DLUX_STRINGS.cache }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                <span class="font-monospace">{{ cache_service.detail }}</span>
                                <span class="badge {{ cache_service.badge_class }}" title="{{ cache_service.note|default:'' }}">{{ cache_service.label }}</span>
                            </div>
                            {% if cache_service.note %}
                            <div class="small text-muted mt-1">{{ cache_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% if email_service %}
                    <tr>
                        <th>{{ DLUX_STRINGS.email_label|default:"Email" }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                <span class="font-monospace">{{ email_service.detail }}</span>
                                <span class="badge {{ email_service.badge_class }}" title="{{ email_service.note|default:'' }}">{{ email_service.label }}</span>
                            </div>
                            {% if email_service.note %}
                            <div class="small text-muted mt-1">{{ email_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% if celery_service %}
                    <tr>
                        <th>{{ DLUX_STRINGS.tasks }}:</th>
                        <td class="text-end">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                                {% if celery_service.detail %}
                                <span class="font-monospace">{{ celery_service.detail }}</span>
                                {% endif %}
                                <span class="badge {{ celery_service.badge_class }}" title="{{ celery_service.note|default:'' }}">{{ celery_service.label }}</span>
                            </div>
                            {% if celery_service.note %}
                            <div class="small text-muted mt-1">{{ celery_service.note }}</div>
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                                </table>
                            </div>
                        </details>
                    </section>
                    <section class="dlux-admin-tile dlux-admin-tile--update">
                        <h5 class="dlux-admin-tile-title"><i class="bi bi-arrow-repeat"></i> {{ DLUX_STRINGS.dlux_version }}</h5>
                            <div class="dlux-updater"
                                 data-dlux-updater
                                 data-state-url="{% url 'dlux_update_state' %}"
                                 data-check-url="{% url 'dlux_update_check' %}"
                                 data-apply-url="{% url 'dlux_update_apply' %}"
                                 data-rollback-url="{% url 'dlux_update_rollback' %}"
                                 data-can-manage="{% if can_manage_dlux_updates %}true{% else %}false{% endif %}"
                                 data-label-installed="{{ DLUX_STRINGS.dlux_update_installed|default:'Installed' }}"
                                 data-label-latest="{{ DLUX_STRINGS.dlux_update_latest|default:'Latest verified' }}"
                                 data-label-last-check="{{ DLUX_STRINGS.dlux_update_last_check|default:'Last check' }}"
                                 data-label-running="{{ DLUX_STRINGS.dlux_update_running|default:'Update operation in progress' }}"
                                 data-label-completed="{{ DLUX_STRINGS.dlux_update_completed|default:'Update operation completed' }}"
                                 data-label-failed="{{ DLUX_STRINGS.dlux_update_failed|default:'Update operation failed' }}"
                                 data-label-password="{{ DLUX_STRINGS.current_password|default:'Current password' }}"
                                 data-label-update-title="{{ DLUX_STRINGS.dlux_update_review_title|default:'Review DjangoLux update' }}"
                                 data-label-rollback-title="{{ DLUX_STRINGS.dlux_update_rollback_title|default:'Roll back DjangoLux' }}"
                                 data-label-update-confirm="{{ DLUX_STRINGS.dlux_update_confirm|default:'Apply update' }}"
                                 data-label-rollback-confirm="{{ DLUX_STRINGS.dlux_update_rollback_confirm|default:'Roll back' }}"
                                 data-label-local-verified="{{ DLUX_STRINGS.dlux_update_local_verified|default:'Verified local release' }}"
                                 data-label-ready="{{ DLUX_STRINGS.dlux_update_ready|default:'Ready for inline update.' }}"
                                 data-label-uptodate="{{ DLUX_STRINGS.dlux_update_up_to_date|default:'DjangoLux is up to date.' }}"
                                 data-label-finish="{{ DLUX_STRINGS.dlux_update_finish|default:'Finish' }}"
                                 data-maintenance-note="{{ DLUX_STRINGS.dlux_update_maintenance_notice|default:'The project will briefly enter maintenance mode while migrations, static assets, and process restarts complete.' }}">
                                <div class="dlux-updater-versions">
                                    <span>{{ DLUX_STRINGS.dlux_update_installed|default:'Installed' }}:</span>
                                    <span class="badge bg-success" data-dlux-update-active>v{{ dlux_update_state.active_version|default:version }}</span>
                                    <span>{{ DLUX_STRINGS.dlux_update_latest|default:'Latest verified' }}:</span>
                                    <span class="badge bg-secondary" data-dlux-update-latest>{% if dlux_update_state.latest_version %}v{{ dlux_update_state.latest_version }}{% else %}—{% endif %}</span>
                                </div>
                                <div class="small text-muted mt-1" data-dlux-update-reason>{{ dlux_update_state.latest_reason }}</div>
                                <div class="small text-muted mt-1">
                                    {{ DLUX_STRINGS.dlux_update_last_check|default:'Last check' }}:
                                    <time data-dlux-update-checked>{{ dlux_update_state.last_checked_at|default:'—' }}</time>
                                </div>
                                <div class="small mt-1 dlux-updater-run-status" data-dlux-update-run-status hidden aria-live="polite"></div>
                                {% if not dlux_update_state.enabled %}
                                <div class="small text-muted mt-1">{{ DLUX_STRINGS.dlux_update_disabled|default:'Inline updates are not enabled for this deployment.' }}</div>
                                {% endif %}
                                {% if can_manage_dlux_updates %}
                                <div class="dlux-updater-actions mt-2">
                                    <button type="button" class="btn btn-outline-primary btn-sm" data-dlux-update-check>
                                        {{ DLUX_STRINGS.dlux_update_check|default:'Check for updates' }}
                                    </button>
                                    <button type="button" class="btn btn-primary btn-sm" data-dlux-update-review hidden>
                                        {{ DLUX_STRINGS.dlux_update_review|default:'Review and update' }}
                                    </button>
                                    <button type="button" class="btn btn-outline-warning btn-sm" data-dlux-update-rollback hidden>
                                        {{ DLUX_STRINGS.dlux_update_rollback|default:'Roll back to previous version' }}
                                    </button>
                                </div>
                                {% endif %}
                            </div>
                    </section>
                    {% endif %}
                    {% if user.is_superuser %}
                    <section class="dlux-admin-tile dlux-admin-tile--backup">
                        <h5 class="dlux-admin-tile-title"><i class="bi bi-safe2-fill"></i> {{ DLUX_STRINGS.sysbackup_title }}</h5>
                {% with summary=system_backup_summary %}
                <div class="dlux-system-backup-summary">
                    <div class="dlux-system-backup-feature">
                        <span class="dlux-system-backup-label">{{ DLUX_STRINGS.sysbackup_last_backup }}</span>
                        <strong class="dlux-system-backup-value">
                            {% if summary.latest_completed_backup and summary.latest_completed_backup.completed_at %}
                                {{ summary.latest_completed_backup.completed_at|date:'Y-m-d H:i' }}
                            {% elif summary.latest_backup %}
                                {{ summary.latest_backup.created_at|date:'Y-m-d H:i' }}
                            {% else %}
                                {{ DLUX_STRINGS.sysbackup_never }}
                            {% endif %}
                        </strong>
                    </div>
                </div>
                {% endwith %}
                <a class="btn btn-primary dlux-system-backup-action"
                   href="{% url 'system_backup_page' %}">
                    <i class="bi bi-box-arrow-up-right me-1"></i>{{ DLUX_STRINGS.sysbackup_open }}
                </a>
                    </section>
                    {% endif %}
                </div>
                {% if user.is_superuser %}
                <div class="dlux-admin-panel-settings">
                    <div class="dlux-admin-settings-head">
                        <h5 class="dlux-admin-tile-title mb-0"><i class="bi bi-sliders"></i> {{ DLUX_STRINGS.system_settings_label }}</h5>
                        <p class="text-muted small mb-0">{{ DLUX_STRINGS.system_settings_desc }}</p>
                    </div>
                    <div class="dlux-system-settings-actions dlux-admin-settings-grid">
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=0"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_branding }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_branding_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_branding }}. {{ DLUX_STRINGS.system_settings_branding_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-palette-fill"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_branding }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=1"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_languages }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_languages_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_languages }}. {{ DLUX_STRINGS.system_settings_languages_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-translate"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_languages }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=2"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_security }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_security_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_security }}. {{ DLUX_STRINGS.system_settings_security_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-shield-lock"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_security }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=3"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_login_page }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_login_page_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_login_page }}. {{ DLUX_STRINGS.system_settings_login_page_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-box-arrow-in-right"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_login_page }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=4"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_sidebar }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_sidebar_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_sidebar }}. {{ DLUX_STRINGS.system_settings_sidebar_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-layout-sidebar-inset"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_sidebar }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=5"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_navbar }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_navbar_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_navbar }}. {{ DLUX_STRINGS.system_settings_navbar_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-signpost-split"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_navbar }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=6"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_ui_layout }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_ui_layout_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_ui_layout }}. {{ DLUX_STRINGS.system_settings_ui_layout_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-window-stack"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_ui_layout }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=7"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_notifications }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_notifications_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_notifications }}. {{ DLUX_STRINGS.system_settings_notifications_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-bell-fill"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_notifications }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=8"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_appearance }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_appearance_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_appearance }}. {{ DLUX_STRINGS.system_settings_appearance_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-brush"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_appearance }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=9"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_logging|default:'Logging' }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_logging_desc|default:'Control activity, system, and audit logging.' }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_logging|default:'Logging' }}. {{ DLUX_STRINGS.system_settings_logging_desc|default:'Control activity, system, and audit logging.' }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-journal-text"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_logging|default:'Logging' }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=10"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_profile|default:'Profile Page' }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_profile_desc|default:'Profile-page composition and first-launch user setup.' }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_profile|default:'Profile Page' }}. {{ DLUX_STRINGS.system_settings_profile_desc|default:'Profile-page composition and first-launch user setup.' }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-person-badge"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_profile|default:'Profile Page' }}</span>
                    </button>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=11"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_backups|default:'Backups' }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_backups_desc|default:'Scheduled backup, storage, and retention policy.' }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_backups|default:'Backups' }}. {{ DLUX_STRINGS.system_settings_backups_desc|default:'Scheduled backup, storage, and retention policy.' }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-safe2-fill"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_backups|default:'Backups' }}</span>
                    </button>
                    <a class="dlux-system-settings-action dlux-system-settings-tile dlux-system-settings-action--secondary"
                       href="{% url 'system_settings_export' %}"
                       data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_export_desc }}"
                       aria-label="{{ DLUX_STRINGS.system_settings_export }}. {{ DLUX_STRINGS.system_settings_export_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-download"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_export }}</span>
                    </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
        <!-- Accessibility Section -->
        <div class="dlux-options-card no-print" data-options-card="accessibility">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-eye me-2"></i> {{ DLUX_STRINGS.accessibility }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.accessibility_desc }}</p>

                <div class="d-grid gap-3 dlux-options-switch-list">
                    <div class="dlux-options-switch-row">
                        <label for="options-accessibility-high-contrast">{{ DLUX_STRINGS.high_contrast }}</label>
                        <div class="form-check form-switch">
                            <input id="options-accessibility-high-contrast" name="accessibility_high_contrast" class="form-check-input accessibility-switch" type="checkbox" data-accessibility="high-contrast">
                        </div>
                    </div>
                    <div class="dlux-options-switch-row">
                        <label for="options-accessibility-grayscale">{{ DLUX_STRINGS.grayscale }}</label>
                        <div class="form-check form-switch">
                            <input id="options-accessibility-grayscale" name="accessibility_grayscale" class="form-check-input accessibility-switch" type="checkbox" data-accessibility="grayscale">
                        </div>
                    </div>
                    <div class="dlux-options-switch-row">
                        <label for="options-accessibility-invert">{{ DLUX_STRINGS.invert }}</label>
                        <div class="form-check form-switch">
                            <input id="options-accessibility-invert" name="accessibility_invert" class="form-check-input accessibility-switch" type="checkbox" data-accessibility="invert">
                        </div>
                    </div>
                    <div class="dlux-options-switch-row">
                        <label for="options-accessibility-large-text">{{ DLUX_STRINGS.large_text }}</label>
                        <div class="form-check form-switch">
                            <input id="options-accessibility-large-text" name="accessibility_large_text" class="form-check-input accessibility-switch" type="checkbox" data-accessibility="large-text">
                        </div>
                    </div>
                    <div class="dlux-options-switch-row">
                        <label for="options-accessibility-no-animations">{{ DLUX_STRINGS.no_animations }}</label>
                        <div class="form-check form-switch">
                            <input id="options-accessibility-no-animations" name="accessibility_no_animations" class="form-check-input accessibility-switch" type="checkbox" data-accessibility="no-animations">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% if config.profile_config.allow_user_home_url %}
        <!-- Landing Page (per-user) -->
        <div class="dlux-options-card no-print" data-options-card="landing-page">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-house-door me-2"></i> {{ DLUX_STRINGS.options_landing_page|default:"Landing page" }}</h4>
                <p class="text-muted small mb-3">{{ DLUX_STRINGS.options_landing_page_desc|default:"Where you land after signing in. Leave on system default to use the configured home." }}</p>
                <div class="input-group">
                    <select class="form-select" id="options-user-home-url" data-user-home-url>
                        <option value="">{{ DLUX_STRINGS.options_landing_page_default|default:"System default" }}</option>
                        {% for opt in user_home_url_options %}
                        <option value="{{ opt.value }}" {% if opt.value == user_preferences.user_home_url %}selected{% endif %}>{{ opt.label }}</option>
                        {% endfor %}
                    </select>
                    <button class="btn btn-primary" type="button" data-user-home-url-save
                            data-saved-message="{{ DLUX_STRINGS.options_landing_page_saved|default:'Landing page saved.' }}">
                        {{ DLUX_STRINGS.btn_save|default:"Save" }}
                    </button>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Theme / Language Selection -->
        {% if config.allow_user_theme_override and DLUX_THEMES|length > 1 or language_picker_enabled %}

            {% if DLUX_THEMES|length > 5 or LANGUAGES|length > 2 %}

                {% if config.allow_user_theme_override and DLUX_THEMES|length > 1 %}
                <div class="dlux-options-card no-print" data-options-card="theme">
                    <div class="glass-profile option-section h-100 dlux-options-panel">
                        <button class="dlux-options-card-handle"
                                type="button"
                                data-options-card-handle
                                aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                                title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                            <i class="bi bi-grip-vertical"></i>
                        </button>
                        <h4 class="mb-3"><i class="bi bi-palette me-2"></i> {{ DLUX_STRINGS.themes }}</h4>
                        <p class="text-muted small mb-4">{{ DLUX_STRINGS.themes_desc }}</p>
                        {% include 'dlux/includes/theme_previews.html' with selected_theme=user_preferences.theme|default:APP_CONFIG.default_theme picker_mode='options' %}
                    </div>
                </div>
                {% endif %}

                {% if language_picker_enabled %}
                <div class="dlux-options-card no-print" data-options-card="language">
                    <div class="glass-profile option-section h-100 dlux-options-panel">
                        <button class="dlux-options-card-handle"
                                type="button"
                                data-options-card-handle
                                aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                                title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                            <i class="bi bi-grip-vertical"></i>
                        </button>
                        <h4 class="mb-3"><i class="bi bi-translate me-2"></i> {{ DLUX_STRINGS.language }}</h4>
                        <p class="text-muted small mb-4">{{ DLUX_STRINGS.language_desc }}</p>

                        {% if LANGUAGES|length > 1 %}
                            {% include 'dlux/includes/language_previews.html' with selected_language=CURRENT_LANG picker_mode='options' languages=LANGUAGES %}
                        {% endif %}
                    </div>
                </div>
                {% endif %}

            {% else %}

                <div class="dlux-options-card no-print" data-options-card="theme-language">
                    <div class="glass-profile option-section h-100 dlux-options-panel">
                        <button class="dlux-options-card-handle"
                                type="button"
                                data-options-card-handle
                                aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                                title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                            <i class="bi bi-grip-vertical"></i>
                        </button>

                        {% if config.allow_user_theme_override and DLUX_THEMES|length > 1 %}
                            <div class="mb-4">
                                <h4 class="mb-3"><i class="bi bi-palette me-2"></i> {{ DLUX_STRINGS.themes }}</h4>
                                <p class="text-muted small mb-4">{{ DLUX_STRINGS.themes_desc }}</p>
                                {% include 'dlux/includes/theme_previews.html' with selected_theme=user_preferences.theme|default:APP_CONFIG.default_theme picker_mode='options' %}
                            </div>
                        {% endif %}

                        {% if config.allow_user_theme_override and DLUX_THEMES|length > 1 %}
                            {% if language_picker_enabled %}
                                <hr class="my-4">
                            {% endif %}
                        {% endif %}

                        {% if language_picker_enabled %}
                            <div>
                                <h4 class="mb-3"><i class="bi bi-translate me-2"></i> {{ DLUX_STRINGS.language }}</h4>
                                <p class="text-muted small mb-4">{{ DLUX_STRINGS.language_desc }}</p>

                                {% if LANGUAGES|length > 1 %}
                                    {% include 'dlux/includes/language_previews.html' with selected_language=CURRENT_LANG picker_mode='options' languages=LANGUAGES %}
                                {% endif %}
                            </div>
                        {% endif %}

                    </div>
                </div>

            {% endif %}

        {% endif %}
        
        <!-- Typography Section -->
        {% if font_picker_enabled %}
        <div class="dlux-options-card no-print" data-options-card="typography">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-fonts me-2"></i> {{ DLUX_STRINGS.typography }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.typography_desc }}</p>

                {% include 'dlux/includes/font_previews.html' with selected_font=active_font option_fonts=option_fonts %}
            </div>
        </div>
        {% endif %}

        <!-- Table Density -->
        <div class="dlux-options-card no-print" data-options-card="table-density">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-table me-2"></i> {{ DLUX_STRINGS.table_density|default:"Table Density" }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.table_density_desc|default:"Control how much vertical space data tables use while you work." }}</p>
                {% include 'dlux/includes/table_density_previews.html' with selected_density=user_preferences.table_density|default:APP_CONFIG.default_table_density picker_mode='options' density_choices=DLUX_TABLE_DENSITIES DLUX_STRINGS=DLUX_STRINGS %}
            </div>
        </div>

        <div class="dlux-options-card no-print" data-options-card="form-density">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-textarea-resize me-2"></i> {{ DLUX_STRINGS.form_density|default:"Form Density" }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.form_density_desc|default:"Control how much vertical space form fields use while you work." }}</p>
                {% include 'dlux/includes/form_density_previews.html' with selected_density=user_preferences.form_density|default:APP_CONFIG.appearance.default_form_density density_choices=DLUX_TABLE_DENSITIES DLUX_STRINGS=DLUX_STRINGS %}
            </div>
        </div>

        <div class="dlux-options-card no-print" data-options-card="modal-size">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-window me-2"></i> {{ DLUX_STRINGS.modal_size|default:"Modal Size" }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.modal_size_desc|default:"Control the width of pop-up dialogs while you work." }}</p>
                {% include 'dlux/includes/modal_size_previews.html' with selected_size=user_preferences.modal_size|default:APP_CONFIG.appearance.default_modal_size size_choices=DLUX_MODAL_SIZES DLUX_STRINGS=DLUX_STRINGS %}
            </div>
        </div>

        {% if navbar.enabled and navbar.allow_user_mode_override %}
        <div class="dlux-options-card no-print" data-options-card="navbar-mode">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-signpost-split me-2"></i> {{ DLUX_STRINGS.navbar_options_title }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.navbar_options_desc }}</p>
                {% include 'dlux/includes/navbar_mode_previews.html' with selected_mode=user_preferences.navbar_mode|default:navbar.default_mode DLUX_STRINGS=DLUX_STRINGS %}
            </div>
        </div>
        {% endif %}

        {% if sidebar_enabled and config.sidebar.allow_user_density %}
        <!-- Sidebar Density -->
        <div class="dlux-options-card no-print" data-options-card="sidebar-density">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-layout-sidebar-inset me-2"></i> {{ DLUX_STRINGS.sidebar_density|default:"Sidebar Density" }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.sidebar_density_desc|default:"Control how much vertical space the sidebar navigation uses while you work." }}</p>
                {% include 'dlux/includes/sidebar_density_previews.html' with selected_density=user_preferences.sidebar_density|default:sidebar_density|default:config.sidebar.density picker_mode='options' density_choices=DLUX_TABLE_DENSITIES DLUX_STRINGS=DLUX_STRINGS %}
            </div>
        </div>
        {% endif %}

        <!-- Autofill -->
        <div class="dlux-options-card no-print" data-options-card="autofill">
            <div class="glass-profile option-section h-100 dlux-options-panel">
                <button class="dlux-options-card-handle"
                        type="button"
                        data-options-card-handle
                        aria-label="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}"
                        title="{{ DLUX_STRINGS.sidebar_reorder|default:'Reorder' }}">
                    <i class="bi bi-grip-vertical"></i>
                </button>
                <h4 class="mb-3"><i class="bi bi-magic me-2"></i> {{ DLUX_STRINGS.autofill }}</h4>
                <p class="text-muted small mb-4">{{ DLUX_STRINGS.autofill_desc }}</p>
                <div class="dlux-options-toggle-shell">
                    <label class="dlux-options-toggle-label" for="autofillToggle">{{ DLUX_STRINGS.on_off }}</label>
                    <div class="form-check form-switch dlux-options-inline-switch">
                        <input class="form-check-input"
                               type="checkbox"
                               id="autofillToggle"
                               name="autofill_enabled"
                               checked
                               data-enabled-message="{{ DLUX_STRINGS.autofill_enabled }}"
                               data-disabled-message="{{ DLUX_STRINGS.autofill_disabled }}">
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Reset Defaults: standalone footer danger zone (resets the options above; not an options card) -->
    <div class="dlux-options-reset-footer no-print">
        <div class="dlux-options-reset-bar dlux-options-panel--danger"
             data-reset-url="{% url 'reset_preferences' %}"
             data-reset-success="{{ DLUX_STRINGS.reset_success }}"
             data-reset-error="{{ DLUX_STRINGS.reset_error|default:'Unable to reset preferences.' }}">
            <div class="dlux-options-reset-bar-text">
                <h4 class="mb-1 text-danger"><i class="bi bi-arrow-counterclockwise me-2"></i> {{ DLUX_STRINGS.reset_defaults }}</h4>
                <p class="text-muted small mb-0">{{ DLUX_STRINGS.reset_desc }}</p>
            </div>
            <div class="dlux-options-reset-bar-actions">
                <button class="btn btn-outline-danger btn-sm dlux-options-reset-action" id="btnResetInit">
                    <i class="bi bi-arrow-counterclockwise me-1"></i> {{ DLUX_STRINGS.reset_btn }}
                </button>
                <div id="resetActions" class="dlux-options-reset-actions" hidden>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-danger btn-sm" id="btnResetConfirm">
                            <i class="bi bi-check-lg me-1"></i> {{ DLUX_STRINGS.confirm }}
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm" id="btnResetCancel">
                            <i class="bi bi-x-lg me-1"></i> {{ DLUX_STRINGS.cancel }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if can_manage_dlux_updates %}
    <div class="modal fade" id="dluxUpdateReviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" data-dlux-update-modal-title>{{ DLUX_STRINGS.dlux_update_review_title|default:'Review DjangoLux update' }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ DLUX_STRINGS.btn_close|default:'Close' }}"></button>
                </div>
                <div data-dlux-update-form role="group">
                    <div class="modal-body">
                        <div data-dlux-update-review-panel>
                            <div class="alert alert-info">{{ DLUX_STRINGS.dlux_update_backup_guarantee|default:'A pre-update backup is created and verified before maintenance (unless you skip it below). If a backup is requested and fails, the operation stops.' }}</div>
                            <div class="alert alert-warning" data-dlux-update-maintenance>{{ DLUX_STRINGS.dlux_update_maintenance_notice|default:'The project will briefly enter maintenance mode while migrations, static assets, and process restarts complete.' }}</div>
                            <dl class="row mb-3">
                                <dt class="col-4">{{ DLUX_STRINGS.dlux_update_target|default:'Target version' }}</dt>
                                <dd class="col-8 font-monospace" data-dlux-update-target></dd>
                                <dt class="col-4">{{ DLUX_STRINGS.dlux_update_summary|default:'Release summary' }}</dt>
                                <dd class="col-8" data-dlux-update-summary></dd>
                                <dt class="col-4">{{ DLUX_STRINGS.dlux_update_compatibility|default:'Compatibility' }}</dt>
                                <dd class="col-8" data-dlux-update-compatibility></dd>
                            </dl>
                            <label class="form-label" for="dluxUpdateBackupMode">{{ DLUX_STRINGS.dlux_update_backup_mode|default:'Pre-update backup' }}</label>
                            <select class="form-select mb-3" id="dluxUpdateBackupMode" name="backup_mode" data-dlux-update-backup-mode>
                                <option value="data" selected>{{ DLUX_STRINGS.dlux_update_backup_data|default:'Quick — data only (recommended, fast)' }}</option>
                                <option value="full">{{ DLUX_STRINGS.dlux_update_backup_full|default:'Full — database + media (slower)' }}</option>
                                <option value="skip">{{ DLUX_STRINGS.dlux_update_backup_skip|default:'Skip — no backup (fastest, not recommended)' }}</option>
                            </select>
                            <label class="form-label" for="dluxUpdateCurrentPassword">{{ DLUX_STRINGS.current_password|default:'Current password' }}</label>
                            <input type="password" class="form-control" id="dluxUpdateCurrentPassword" name="current_password" autocomplete="off" data-1p-ignore data-lpignore="true" required>
                        </div>
                        <div data-dlux-update-progress-panel hidden aria-live="polite">
                            <div class="d-flex justify-content-between gap-3 mb-2">
                                <strong>{{ DLUX_STRINGS.dlux_update_running|default:'Update operation in progress' }}</strong>
                                <span data-dlux-update-progress-status></span>
                            </div>
                            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dlux-update-progress>
                                <div class="progress-bar progress-bar-striped progress-bar-animated dlux-updater-progress-bar" data-dlux-update-progress-bar></div>
                            </div>
                            <pre class="dlux-updater-progress-log mt-3 mb-0" data-dlux-update-progress-log></pre>
                        </div>
                        <div class="text-danger small mt-2" data-dlux-update-error hidden></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dlux-update-dismiss>{{ DLUX_STRINGS.btn_cancel|default:'Cancel' }}</button>
                        <button type="button" class="btn btn-primary" data-dlux-update-submit>{{ DLUX_STRINGS.dlux_update_confirm|default:'Apply update' }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script src="{% static 'dlux/main/js/options.js' %}?v=20260627b" nonce="{{ request.csp_nonce }}" defer></script>
    <script src="{% static 'dlux/main/js/updater.js' %}?v=20260626a" nonce="{{ request.csp_nonce }}" defer></script>
{% endblock %}