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

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

{% block extra_head %}
    {% include "dlux/forms/assets_head.html" %}
    <link rel="stylesheet" href="{% dlux_static 'dlux/system/css/options.css' %}">
{% 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-style="{{ APP_CONFIG.appearance.options_style|default:'cards' }}"
         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" data-options-deeplink="admin-panel">
            <div class="glass-profile option-section dlux-options-panel dlux-admin-panel">
                <div class="dlux-admin-panel-heading">
                    <div class="dlux-admin-panel-heading-row">
                        <h4 class="mb-1"><i class="bi bi-shield-lock-fill me-2"></i> {{ DLUX_STRINGS.admin_panel_title|default:'Admin panel' }}</h4>
                        {% if user.is_superuser %}
                        <div class="dlux-admin-command-launcher" data-admin-command-launcher>
                            <div class="dlux-admin-command-rail" data-admin-command-rail>
                                <button class="dlux-admin-command-chip"
                                   type="button"
                                   data-dynamic-modal="{% url 'asset_manager' %}"
                                   data-modal-title="{{ DLUX_STRINGS.asset_manager_title|default:'Asset Manager' }}"
                                   data-dlux-tooltip="{{ DLUX_STRINGS.asset_manager_desc|default:'Manage reusable images and fonts.' }}"
                                   aria-label="{{ DLUX_STRINGS.asset_manager_title|default:'Asset Manager' }}">
                                    <i class="bi bi-images"></i>
                                    <span>{{ DLUX_STRINGS.asset_manager_title|default:'Asset Manager' }}</span>
                                </button>
                                <a class="dlux-admin-command-chip"
                                   href="{% url 'control_panel' %}"
                                   data-control-panel-open
                                   data-dlux-tooltip="{{ DLUX_STRINGS.control_link_tile_desc|default:'Pair this app with your central control panel.' }}"
                                   aria-label="{{ DLUX_STRINGS.control_link_title|default:'Control Panel' }}">
                                    <i class="bi bi-diagram-3"></i>
                                    <span>{{ DLUX_STRINGS.control_link_title|default:'Control Panel' }}</span>
                                </a>
                                <button class="dlux-admin-command-chip dlux-admin-command-chip--danger"
                                        type="button"
                                        data-force-pass-change-open
                                        data-url="{% url 'dlux_force_pass_change_all' %}"
                                        data-title="{{ DLUX_STRINGS.force_pass_change_all_title|default:'Force password change for all users' }}"
                                        data-description="{{ DLUX_STRINGS.force_pass_change_all_warning|default:'Every non-superuser account will be required to change password before continuing. Superusers are skipped.' }}"
                                        data-confirm-label="{{ DLUX_STRINGS.force_pass_change_all_confirm|default:'Force password change' }}"
                                        data-dlux-tooltip="{{ DLUX_STRINGS.force_pass_change_all_desc|default:'Require every non-superuser account to change password on next login.' }}"
                                        aria-label="{{ DLUX_STRINGS.force_pass_change_all_title|default:'Force password change for all users' }}">
                                    <i class="bi bi-key-fill"></i>
                                    <span>{{ DLUX_STRINGS.force_pass_change_all_short|default:'Force passwords' }}</span>
                                </button>
                                <button class="dlux-admin-command-chip dlux-admin-command-chip--danger"
                                        type="button"
                                        data-data-reset-open
                                        data-preview-url="{% url 'dlux_data_reset_preview' %}"
                                        data-execute-url="{% url 'dlux_data_reset_execute' %}"
                                        data-title="{{ DLUX_STRINGS.data_reset_title|default:'Reset data' }}"
                                        data-description="{{ DLUX_STRINGS.data_reset_password_prompt|default:'Enter your current password to choose which data to clear.' }}"
                                        data-confirm-label="{{ DLUX_STRINGS.data_reset_continue|default:'Continue' }}"
                                        data-dlux-tooltip="{{ DLUX_STRINGS.data_reset_desc|default:'Clear row data from selected models (scoped models are soft-deleted).' }}"
                                        aria-label="{{ DLUX_STRINGS.data_reset_title|default:'Reset data' }}">
                                    <i class="bi bi-trash3-fill"></i>
                                    <span>{{ DLUX_STRINGS.data_reset_short|default:'Reset data' }}</span>
                                </button>
                            </div>
                            <button class="dlux-admin-command-toggle"
                                    type="button"
                                    data-admin-command-toggle
                                    aria-expanded="false"
                                    aria-label="{{ DLUX_STRINGS.admin_commands_title|default:'Admin commands' }}"
                                    title="{{ DLUX_STRINGS.admin_commands_title|default:'Admin commands' }}">
                                <i class="bi bi-terminal"></i>
                            </button>
                        </div>
                        {% endif %}
                    </div>
                    <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>
                            {% if composer_version %}
                            <div class="dlux-admin-stat">
                                <span class="dlux-admin-stat-label">{{ DLUX_STRINGS.composer_deployer_version }}</span>
                                <span class="dlux-admin-stat-value font-monospace">{{ composer_version }}</span>
                            </div>
                            {% endif %}
                            {% if composer_agent_version %}
                            <div class="dlux-admin-stat">
                                <span class="dlux-admin-stat-label">{{ DLUX_STRINGS.composer_agent_version }}</span>
                                <span class="dlux-admin-stat-value font-monospace">{{ composer_agent_version }}</span>
                            </div>
                            {% endif %}
                        </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"
                                 data-dlux-email-health
                                 data-check-url="{% url 'email_health_check' %}"
                                 data-error-label="{{ DLUX_STRINGS.service_email_check_failed|default:'Check failed' }}">
                                {% if email_service.detail %}
                                <span class="font-monospace" data-email-detail>{{ email_service.detail }}</span>
                                {% endif %}
                                <span class="badge {{ email_service.badge_class }}" data-email-badge title="{{ email_service.note|default:'' }}">{{ email_service.label }}</span>
                                <button type="button" class="dlux-upd-ic" data-email-recheck
                                        title="{{ DLUX_STRINGS.service_email_recheck|default:'Re-read email status' }}"
                                        aria-label="{{ DLUX_STRINGS.service_email_recheck|default:'Re-read email status' }}"><i class="bi bi-arrow-clockwise"></i></button>
                            </div>
                            <div class="small text-muted mt-1" data-email-note>{{ email_service.note }}</div>
                        </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"
                                 data-dlux-celery-health
                                 data-check-url="{% url 'celery_health_check' %}"
                                 data-error-label="{{ DLUX_STRINGS.service_celery_check_failed|default:'Check failed' }}">
                                {% if celery_service.detail %}
                                <span class="font-monospace" data-celery-detail>{{ celery_service.detail }}</span>
                                {% endif %}
                                <span class="badge {{ celery_service.badge_class }}" data-celery-badge title="{{ celery_service.note|default:'' }}">{{ celery_service.label }}</span>
                                <button type="button" class="dlux-upd-ic" data-celery-recheck
                                        title="{{ DLUX_STRINGS.service_celery_recheck|default:'Check worker health' }}"
                                        aria-label="{{ DLUX_STRINGS.service_celery_recheck|default:'Check worker health' }}"><i class="bi bi-arrow-clockwise"></i></button>
                            </div>
                            <div class="small text-muted mt-1" data-celery-note>{{ celery_service.note }}</div>
                        </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_update_title|default:'Application updates' }}</h5>
                            <div class="dlux-updater"
                                 data-dlux-updater
                                 data-state-url="{% url 'dlux_update_state' %}"
                                 data-check-url="{% url 'dlux_update_check' %}"
                                 data-skip-url="{% url 'dlux_update_skip' %}"
                                 data-label-unskip="{{ DLUX_STRINGS.dlux_update_unskip|default:'Un-skip' }}"
                                 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-label-generic-changes="{{ DLUX_STRINGS.dlux_update_generic_changes|default:'Bug fixes and improvements' }}"
                                 data-label-baked-dlux="{{ DLUX_STRINGS.dlux_update_baked_label|default:'baked dlux' }}"
                                 data-note-baked-dlux="{{ DLUX_STRINGS.dlux_update_baked_note|default:'DjangoLux version baked into this image' }}"
                                 data-image-url="{% url 'dlux_update_image' %}"
                                 data-deploy-status-url="{{ DLUX_DEPLOY_STATUS_URL|default:'/_update/status.json' }}"
                                 data-deploy-log-url="{{ DLUX_DEPLOY_LOG_URL|default:'/_update/log.txt' }}"
                                 data-label-image-title="{{ DLUX_STRINGS.dlux_update_image_title|default:'Update DjangoLux (image rebuild)' }}"
                                 data-label-image-confirm="{{ DLUX_STRINGS.dlux_update_image_confirm|default:'Rebuild and update' }}"
                                 data-label-image-started="{{ DLUX_STRINGS.dlux_update_image_started|default:'Image update started. The site will enter maintenance and return on the new version; this page may be briefly unavailable during the rebuild.' }}"
                                 data-image-maintenance-note="{{ DLUX_STRINGS.dlux_update_image_maintenance_notice|default:'This is a full image update: the application containers are pulled and recreated. The site enters maintenance and briefly becomes unavailable while the new version starts and migrations run.' }}"
                                 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.' }}"
                                 data-label-retry-failed="{{ DLUX_STRINGS.dlux_update_retry_failed_note|default:'Heads up: version {version} already failed to install{when}. Re-applying it will most likely fail again unless the underlying cause was fixed.' }}">
                                <div class="dlux-updater-rows">
                                    <div class="dlux-upd-row">
                                        <span class="dlux-upd-lead">
                                            {% if can_manage_dlux_updates %}
                                            <button type="button" class="dlux-upd-ic"
                                                    title="{{ DLUX_STRINGS.dlux_update_check|default:'Check for updates' }}"
                                                    aria-label="{{ DLUX_STRINGS.dlux_update_check|default:'Check for updates' }}" data-dlux-update-check><i class="bi bi-arrow-clockwise" data-dlux-check-glyph></i></button>
                                            <button type="button" class="dlux-upd-ic dlux-upd-ic--avail" data-dlux-update-review hidden
                                                    title="{{ DLUX_STRINGS.dlux_update_review|default:'Review and update' }}"
                                                    aria-label="{{ DLUX_STRINGS.dlux_update_review|default:'Review and update' }}"><i class="bi bi-arrow-down-circle-fill"></i></button>
                                            {% else %}
                                            <i class="bi bi-box-seam dlux-upd-ic dlux-upd-ic--static"></i>
                                            {% endif %}
                                            <span class="dlux-upd-name">DjangoLux</span>
                                            <span class="dlux-upd-ver" data-dlux-update-active>v{{ dlux_update_state.active_version|default:version }}</span>
                                        </span>
                                        {% if can_manage_dlux_updates %}
                                        <button type="button" class="dlux-upd-ic dlux-upd-ic--rollback" data-dlux-update-rollback hidden
                                                title="{{ DLUX_STRINGS.dlux_update_rollback|default:'Roll back to previous version' }}"
                                                aria-label="{{ DLUX_STRINGS.dlux_update_rollback|default:'Roll back to previous version' }}"><i class="bi bi-arrow-counterclockwise"></i></button>
                                        {% endif %}
                                    </div>
                                    <div class="dlux-upd-row">
                                        <span class="dlux-upd-lead">
                                            <i class="bi bi-check-circle-fill dlux-upd-ic dlux-upd-ic--static dlux-upd-ic--ok" data-dlux-image-ok></i>
                                            {% if can_manage_dlux_updates %}
                                            <button type="button" class="dlux-upd-ic dlux-upd-ic--avail" data-dlux-update-image hidden
                                                    title="{{ DLUX_STRINGS.dlux_update_image|default:'Application update available' }}"
                                                    aria-label="{{ DLUX_STRINGS.dlux_update_image|default:'Application update available' }}"><i class="bi bi-arrow-down-circle-fill"></i></button>
                                            {% endif %}
                                            <span class="dlux-upd-name" data-dlux-image-name>{{ DLUX_STRINGS.dlux_update_application|default:'Application' }}</span>
                                            <span class="dlux-upd-ver" data-dlux-app-version></span>
                                            {% if dlux_update_state.baked_version %}
                                            <span class="dlux-upd-baked" data-dlux-baked-version
                                                  title="{{ DLUX_STRINGS.dlux_update_baked_note|default:'DjangoLux version baked into this image' }}">{{ DLUX_STRINGS.dlux_update_baked_label|default:'baked dlux' }} v{{ dlux_update_state.baked_version }}</span>
                                            {% endif %}
                                            <span class="dlux-upd-target" data-dlux-image-target hidden
                                                  title="{{ DLUX_STRINGS.dlux_update_image|default:'Application update available' }}"></span>
                                        </span>
                                        <code class="dlux-upd-digest" data-dlux-image-digest></code>
                                    </div>
                                    <div class="dlux-upd-ribbon">
                                        <span class="dlux-upd-reason" data-dlux-update-reason>{{ dlux_update_state.latest_reason }}</span>
                                        <span class="dlux-upd-checked">{{ DLUX_STRINGS.dlux_update_last_check|default:'Last check' }}: <time data-dlux-update-checked>{{ dlux_update_state.last_checked_at|default:'—' }}</time> · {{ DLUX_STRINGS.dlux_update_image_label|default:'image' }} <time data-dlux-image-checked>—</time></span>
                                    </div>
                                    <div class="dlux-updater-run-status small mt-1" data-dlux-update-run-status hidden aria-live="polite"></div>
                                    <div class="dlux-upd-skipped mt-2 d-none" data-dlux-skipped-wrap>
                                        <span class="dlux-upd-skipped-label">{{ DLUX_STRINGS.dlux_update_skipped_label|default:'Skipped versions' }}:</span>
                                        <span class="dlux-upd-skipped-list" data-dlux-skipped-list></span>
                                    </div>
                                    <span data-dlux-update-latest hidden>{% if dlux_update_state.latest_version %}v{{ dlux_update_state.latest_version }}{% endif %}</span>
                                    {% if not dlux_update_state.enabled %}
                                    <div class="small text-muted mt-1">{% if dlux_update_state.unavailable_reason %}{{ dlux_update_state.unavailable_reason }}{% else %}{{ DLUX_STRINGS.dlux_update_disabled|default:'Inline updates are not enabled for this deployment.' }}{% endif %}</div>
                                    {% endif %}
                                </div>
                            </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_homepage }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_homepage_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_homepage }}. {{ DLUX_STRINGS.system_settings_homepage_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-house-gear-fill"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_homepage }}</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_email }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_email_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_email }}. {{ DLUX_STRINGS.system_settings_email_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-envelope-at"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_email }}</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_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=5"
                            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=6"
                            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=7"
                            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=8"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_titlebar }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_titlebar_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_titlebar }}. {{ DLUX_STRINGS.system_settings_titlebar_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_titlebar }}</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_search }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_search_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_search }}. {{ DLUX_STRINGS.system_settings_search_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-search"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_search }}</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_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=11"
                            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=12"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_layout }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_layout_desc }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_layout }}. {{ DLUX_STRINGS.system_settings_layout_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-grid-1x2-fill"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_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=13"
                            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=14"
                            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=15"
                            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>
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'modal_manager' 'dlux' 'SystemSettings' 1 %}?step=16"
                            data-modal-title="{{ DLUX_STRINGS.system_settings_extras|default:'Extra Features' }}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_extras_desc|default:'Optional integrations, switched off until a deployment needs them.' }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_extras|default:'Extra Features' }}. {{ DLUX_STRINGS.system_settings_extras_desc|default:'Optional integrations, switched off until a deployment needs them.' }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-puzzle-fill"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_extras|default:'Extra Features' }}</span>
                    </button>
                    {% for app_setting in dlux_app_settings %}
                    <button class="dlux-system-settings-action dlux-system-settings-tile"
                            type="button"
                            data-dynamic-modal="{% url 'dlux_app_settings_modal' app_setting.namespace %}"
                            data-modal-title="{{ app_setting.title }}"
                            data-dlux-tooltip="{{ app_setting.description|default:DLUX_STRINGS.app_settings_default_desc }}"
                            aria-label="{{ app_setting.title }}. {{ app_setting.description|default:DLUX_STRINGS.app_settings_default_desc }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi {{ app_setting.icon }}"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ app_setting.title }}</span>
                    </button>
                    {% endfor %}
                    <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>
                    <button class="dlux-system-settings-action dlux-system-settings-tile dlux-system-settings-action--secondary"
                            type="button"
                            data-settings-import-open
                            data-settings-import-preview-url="{% url 'system_settings_import_preview' %}"
                            data-settings-import-apply-url="{% url 'system_settings_import_apply' %}"
                            data-dlux-tooltip="{{ DLUX_STRINGS.system_settings_import_desc|default:'Compare a configuration file with the current settings and choose what to apply.' }}"
                            aria-label="{{ DLUX_STRINGS.system_settings_import|default:'Import configuration' }}">
                        <span class="dlux-system-settings-tile-icon"><i class="bi bi-upload"></i></span>
                        <span class="dlux-system-settings-tile-title">{{ DLUX_STRINGS.system_settings_import|default:"Import configuration" }}</span>
                    </button>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
        <!-- Accessibility Section -->
        {% dlux_option_card slug="accessibility" icon="bi-eye" title=DLUX_STRINGS.accessibility desc=DLUX_STRINGS.accessibility_desc %}

                <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>
        {% enddlux_option_card %}

        {% if config.profile_config.allow_user_home_url %}
        <!-- Landing Page (per-user) -->
        {% dlux_option_card slug="landing-page" icon="bi-house-door" title=DLUX_STRINGS.options_landing_page|default:"Landing page" %}
                <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="dlux-choice-selector dlux-options-landing-picker">
                    <div class="dlux-choice-selector__options" role="radiogroup"
                         data-user-home-url-group
                         data-saved-message="{{ DLUX_STRINGS.options_landing_page_saved|default:'Landing page saved.' }}">
                        <label class="dlux-choice-option dlux-choice-option--card" data-dlux-selector-option>
                            <input type="radio" class="dlux-choice-option__input" name="user_home_url" value=""
                                   {% if not user_preferences.user_home_url %}checked{% endif %}>
                            <span class="dlux-choice-option__surface">
                                <span class="dlux-choice-option__icon"><i class="bi bi-house-door"></i></span>
                                <span class="dlux-choice-option__copy">
                                    <span class="dlux-choice-option__label">{{ DLUX_STRINGS.options_landing_page_default|default:"System default" }}</span>
                                </span>
                            </span>
                        </label>
                        {% for opt in user_home_url_options %}
                        <label class="dlux-choice-option dlux-choice-option--card" data-dlux-selector-option>
                            <input type="radio" class="dlux-choice-option__input" name="user_home_url" value="{{ opt.value }}"
                                   {% if opt.value == user_preferences.user_home_url %}checked{% endif %}>
                            <span class="dlux-choice-option__surface">
                                <span class="dlux-choice-option__icon"><i class="bi bi-signpost-2"></i></span>
                                <span class="dlux-choice-option__copy">
                                    <span class="dlux-choice-option__label">{{ opt.label }}</span>
                                    <span class="dlux-choice-option__meta dlux-choice-option__meta--secondary">{{ opt.value }}</span>
                                </span>
                            </span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
        {% enddlux_option_card %}
        {% endif %}

        <!-- Theme / Language Selection -->
        {% if options_theme_card_enabled or language_picker_enabled %}

            {% if APP_CONFIG.appearance.options_style == 'tabs' or DLUX_THEMES|length > 5 or LANGUAGES|length > 2 %}

                {% if options_theme_card_enabled %}
                {% dlux_option_card slug="theme" icon="bi-palette" title=DLUX_STRINGS.themes desc=DLUX_STRINGS.themes_desc %}
                        {% include 'dlux/system/previews/theme.html' with selected_theme=user_preferences.theme|default:APP_CONFIG.default_theme picker_mode='options' %}
                {% enddlux_option_card %}
                {% endif %}

                {% if language_picker_enabled %}
                {% dlux_option_card slug="language" icon="bi-translate" title=DLUX_STRINGS.language desc=DLUX_STRINGS.language_desc %}

                        {% if LANGUAGES|length > 1 %}
                            {% include 'dlux/system/previews/language.html' with selected_language=CURRENT_LANG picker_mode='options' languages=LANGUAGES %}
                        {% endif %}
                {% enddlux_option_card %}
                {% 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 options_theme_card_enabled %}
                            <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/system/previews/theme.html' with selected_theme=user_preferences.theme|default:APP_CONFIG.default_theme picker_mode='options' %}
                            </div>
                        {% endif %}

                        {% if options_theme_card_enabled %}
                            {% 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/system/previews/language.html' with selected_language=CURRENT_LANG picker_mode='options' languages=LANGUAGES %}
                                {% endif %}
                            </div>
                        {% endif %}

                    </div>
                </div>

            {% endif %}

        {% endif %}
        
        <!-- Typography Section -->
        {% if font_picker_enabled %}
        {% dlux_option_card slug="typography" icon="bi-fonts" title=DLUX_STRINGS.typography desc=DLUX_STRINGS.typography_desc %}

                {% include 'dlux/system/previews/font.html' with selected_font=active_font option_fonts=option_fonts %}
        {% enddlux_option_card %}
        {% endif %}

        <!-- Table Density -->
        {% dlux_option_card slug="table-density" icon="bi-table" title=DLUX_STRINGS.table_density|default:"Table Density" desc=DLUX_STRINGS.table_density_desc|default:"Control how much vertical space data tables use while you work." %}
                {% include 'dlux/system/previews/table_density.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 %}
        {% enddlux_option_card %}

        {% dlux_option_card slug="form-density" icon="bi-textarea-resize" title=DLUX_STRINGS.form_density|default:"Form Density" desc=DLUX_STRINGS.form_density_desc|default:"Control how much vertical space form fields use while you work." %}
                {% include 'dlux/system/previews/form_density.html' with selected_density=user_preferences.form_density|default:APP_CONFIG.appearance.default_form_density density_choices=DLUX_TABLE_DENSITIES DLUX_STRINGS=DLUX_STRINGS %}
        {% enddlux_option_card %}

        {% dlux_option_card slug="modal-size" icon="bi-window" title=DLUX_STRINGS.modal_size|default:"Modal Size" desc=DLUX_STRINGS.modal_size_desc|default:"Control the width of pop-up dialogs while you work." %}
                {% include 'dlux/system/previews/modal_size.html' with selected_size=user_preferences.modal_size|default:APP_CONFIG.appearance.default_modal_size size_choices=DLUX_MODAL_SIZES DLUX_STRINGS=DLUX_STRINGS %}
        {% enddlux_option_card %}

        {% if navbar.enabled and navbar.allow_user_mode_override %}
        {% dlux_option_card slug="navbar-mode" icon="bi-signpost-split" title=DLUX_STRINGS.navbar_options_title desc=DLUX_STRINGS.navbar_options_desc %}
                {% include 'dlux/system/previews/navbar_mode.html' with selected_mode=user_preferences.navbar_mode|default:navbar.default_mode DLUX_STRINGS=DLUX_STRINGS %}
        {% enddlux_option_card %}
        {% endif %}

        {% if sidebar_enabled and config.sidebar.allow_user_density %}
        <!-- Sidebar Density -->
        {% dlux_option_card slug="sidebar-density" icon="bi-layout-sidebar-inset" title=DLUX_STRINGS.sidebar_density|default:"Sidebar Density" desc=DLUX_STRINGS.sidebar_density_desc|default:"Control how much vertical space the sidebar navigation uses while you work." %}
                {% include 'dlux/system/previews/sidebar_density.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 %}
        {% enddlux_option_card %}
        {% endif %}

        <!-- Assisted entry -->
        {% dlux_option_card slug="autofill" icon="bi-magic" title=DLUX_STRINGS.assist_card_title|default:'Assisted entry' desc=DLUX_STRINGS.assist_card_desc|default:'Two independent shortcuts for repetitive data entry. Forms that support them also show these switches inline.' attrs='data-options-deeplink="autofill"' %}
                <div class="dlux-options-toggle-shell">
                    <label class="dlux-options-toggle-label" for="assistRelatedToggle">
                        {{ DLUX_STRINGS.assist_related_label|default:'Fill from related record' }}
                        <span class="d-block text-muted small">{{ DLUX_STRINGS.assist_related_desc|default:'Choosing a linked record copies its matching fields into this form.' }}</span>
                    </label>
                    <div class="form-check form-switch dlux-options-inline-switch">
                        <input class="form-check-input"
                               type="checkbox"
                               id="assistRelatedToggle"
                               data-assist-pref="autofill_from_related"
                               data-enabled-message="{{ DLUX_STRINGS.assist_related_on|default:'Related records will fill matching fields.' }}"
                               data-disabled-message="{{ DLUX_STRINGS.assist_related_off|default:'Related records will no longer fill fields.' }}">
                    </div>
                </div>
                <div class="dlux-options-toggle-shell mt-3">
                    <label class="dlux-options-toggle-label" for="assistStickyToggle">
                        {{ DLUX_STRINGS.assist_sticky_label|default:'Reuse my last entry' }}
                        <span class="d-block text-muted small">{{ DLUX_STRINGS.assist_sticky_desc|default:'A new form starts pre-filled with the last record you created.' }}</span>
                    </label>
                    <div class="form-check form-switch dlux-options-inline-switch">
                        <input class="form-check-input"
                               type="checkbox"
                               id="assistStickyToggle"
                               data-assist-pref="sticky_forms"
                               data-enabled-message="{{ DLUX_STRINGS.assist_sticky_on|default:'New forms will reuse your last entry.' }}"
                               data-disabled-message="{{ DLUX_STRINGS.assist_sticky_off|default:'New forms will start empty.' }}">
                    </div>
                </div>
        {% enddlux_option_card %}
        {% if DLUX_SCANLINK_ENABLED %}
        {% dlux_option_card slug='scanlink' icon='bi-printer' title=DLUX_STRINGS.scanlink_card_title|default:'ScanLink' %}
            <div class="dlux-options-card-body">{% include 'dlux/system/options_card_scanlink.html' %}</div>
        {% enddlux_option_card %}
        {% endif %}
        {% for card in dlux_option_cards %}
        {% dlux_option_card slug=card.id icon=card.icon title=card.title %}
            <div class="dlux-options-card-body">{{ card.html|safe }}</div>
        {% enddlux_option_card %}
        {% endfor %}

    </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">
            <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">
                <div class="dlux-options-reset-group"
                     data-reset-bar
                     data-reset-scope="dialogs"
                     data-reset-url="{% url 'reset_dialog_prompts' %}"
                     data-reset-success="{{ DLUX_STRINGS.reset_dialogs_success|default:'Dialog prompts have been restored.' }}"
                     data-reset-error="{{ DLUX_STRINGS.reset_dialogs_error|default:'Unable to reset dialog prompts.' }}">
                    <button class="btn btn-outline-secondary btn-sm dlux-options-reset-action" id="btnResetDialogsInit" data-reset-init>
                        <i class="bi bi-chat-square-dots me-1"></i> {{ DLUX_STRINGS.reset_dialogs_btn|default:'Restore prompts' }}
                    </button>
                    <div id="resetDialogsActions" class="dlux-options-reset-actions" hidden data-reset-actions>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-primary btn-sm" data-reset-confirm>
                                <i class="bi bi-check-lg me-1"></i> {{ DLUX_STRINGS.confirm }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm" data-reset-cancel>
                                <i class="bi bi-x-lg me-1"></i> {{ DLUX_STRINGS.cancel }}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="dlux-options-reset-group"
                     data-reset-bar
                     data-reset-scope="preferences"
                     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.' }}">
                    <button class="btn btn-outline-danger btn-sm dlux-options-reset-action" id="btnResetInit" data-reset-init>
                        <i class="bi bi-arrow-counterclockwise me-1"></i> {{ DLUX_STRINGS.reset_btn }}
                    </button>
                    <div id="resetActions" class="dlux-options-reset-actions" hidden data-reset-actions>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-danger btn-sm" id="btnResetConfirm" data-reset-confirm>
                                <i class="bi bi-check-lg me-1"></i> {{ DLUX_STRINGS.confirm }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm" id="btnResetCancel" data-reset-cancel>
                                <i class="bi bi-x-lg me-1"></i> {{ DLUX_STRINGS.cancel }}
                            </button>
                        </div>
                    </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-danger d-none" data-dlux-update-failed-warning role="alert">
                                <div class="fw-semibold" data-dlux-update-failed-text></div>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="dluxUpdateFailedAck" data-dlux-update-failed-ack>
                                    <label class="form-check-label" for="dluxUpdateFailedAck">{{ DLUX_STRINGS.dlux_update_retry_ack|default:'I understand this version already failed to install and want to retry it at my own responsibility.' }}</label>
                                </div>
                            </div>
                            <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"><span data-dlux-update-target></span>
                                    <span class="dlux-upd-baked" data-dlux-update-baked hidden></span></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 justify-content-between">
                        <span class="d-flex gap-2 align-items-center">
                            <button type="button" class="btn btn-outline-secondary btn-sm d-none" data-dlux-update-recheck
                                    title="{{ DLUX_STRINGS.dlux_update_recheck|default:'Re-check for newer release' }}"
                                    aria-label="{{ DLUX_STRINGS.dlux_update_recheck|default:'Re-check for newer release' }}">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm d-none" data-dlux-update-skip
                                    title="{{ DLUX_STRINGS.dlux_update_skip_title|default:'Never offer this version again (you can un-skip it later)' }}">
                                <i class="bi bi-slash-circle me-1"></i>{{ DLUX_STRINGS.dlux_update_skip|default:'Skip this version' }}
                            </button>
                        </span>
                        <span class="d-flex gap-2 ms-auto">
                            <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>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# Force-password-change confirmation now uses the global dluxConfirmPassword #}
    {# prompt (base.html), driven from the launcher chip's data-* attributes.     #}
    {% if user.is_superuser %}{% include 'dlux/system/data_reset_modal.html' %}{% endif %}
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script src="{% dlux_static 'dlux/system/js/options.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
    <script src="{% dlux_static 'dlux/system/js/updater.js' %}" nonce="{{ request.csp_nonce }}" defer></script>
    {% if user.is_superuser %}<script src="{% dlux_static 'dlux/system/js/data_reset.js' %}" nonce="{{ request.csp_nonce }}" defer></script>{% endif %}
{% endblock %}