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

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

{% block extra_head %}
    {% include "microsys/forms/assets_head.html" %}
    <link rel="stylesheet" href="{% static 'microsys/accessibility/css/main.css' %}">
{% endblock %}

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

    <div class="ms-options-grid">
        <!-- Accessibility Section -->
        <div class="ms-options-card no-print">
            <div class="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-eye me-2"></i> {{ MS_TRANS.accessibility }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.accessibility_desc }}</p>

                <div class="d-grid gap-3">
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.high_contrast }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="high-contrast">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.grayscale }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="grayscale">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.invert }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="invert">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.large_text }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="large-text">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                        <span>{{ MS_TRANS.no_animations }}</span>
                        <div class="form-check form-switch">
                            <input class="form-check-input accessibility-switch" type="checkbox" data-accessibility="no-animations">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% if show_system_diagnostics %}
        <!-- System Info Section -->
        <div class="ms-options-card">
            <div class="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-info-circle me-2"></i> {{ MS_TRANS.system_info }}</h4>
                <table class="table table-sm table-borderless mt-4">
                    <tr>
                        <th width="40%">{{ MS_TRANS.server_time }}:</th>
                        <td class="dir-ltr-inline-end font-monospace">{{ current_time|date }}</td>
                    </tr>
                    <tr>
                        <th width="40%">{{ MS_TRANS.storage }}:</th>
                        <td class="dir-ltr font-monospace">
                            <div class="d-flex dir-ltr-inline-end align-items-center gap-2" style="white-space: nowrap;">
                                <span>{{ disk_used }}GB / {{ disk_total }}GB</span>
                                <div class="progress flex-shrink-0" style="width: 90px; height: 6px;">
                                    <div class="progress-bar {% if disk_percent > 90 %}bg-danger{% elif disk_percent > 70 %}bg-warning{% else %}bg-success{% endif %}"
                                        role="progressbar" style="width: {{ disk_percent }}%;"
                                        aria-valuenow="{{ disk_percent }}" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.os_info }}:</th>
                        <td class="text-end">{{ os_info }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.python_version }}:</th>
                        <td class="text-end font-monospace">{{ python_version }}</td>
                    </tr>
                    <tr>
                        <th>{{ MS_TRANS.django_version }}:</th>
                        <td class="text-end font-monospace">{{ django_version }}</td>
                    </tr>
                    {% if decrypter_version %}
                    <tr>
                        <th>{{ MS_TRANS.decrypter_version }}:</th>
                        <td class="text-end font-monospace">{{ decrypter_version }}</td>
                    </tr>
                    {% endif %}
                    {% if drf_service %}
                    <tr>
                        <th>{{ MS_TRANS.drf_version }}:</th>
                        <td class="text-end font-monospace">{{ drf_service.version }}</td>
                    </tr>
                    {% endif %}
                    {% if api_service %}
                    <tr>
                        <th>{{ MS_TRANS.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>{{ MS_TRANS.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>{{ MS_TRANS.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 celery_service %}
                    <tr>
                        <th>{{ MS_TRANS.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 %}
                    <tr>
                        <th>{{ MS_TRANS.microsys_version }}:</th>
                        <td class="text-end"><span class="badge bg-success">v{{ version }}</span></td>
                    </tr>
                </table>
            </div>
        </div>
        {% endif %}

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

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

                {% if config.allow_user_theme_override and MICROSYS_THEMES|length > 1 %}
                <div class="ms-options-card no-print" data-options-card="theme">
                    <div class="glass-profile option-section h-100">
                        <h4 class="mb-3"><i class="bi bi-palette me-2"></i> {{ MS_TRANS.themes }}</h4>
                        <p class="text-muted small mb-4">{{ MS_TRANS.themes_desc }}</p>
                        {% include 'microsys/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="ms-options-card no-print" data-options-card="language">
                    <div class="glass-profile option-section h-100">
                        <h4 class="mb-3"><i class="bi bi-translate me-2"></i> {{ MS_TRANS.language }}</h4>
                        <p class="text-muted small mb-4">{{ MS_TRANS.language_desc }}</p>

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

            {% else %}

                <div class="ms-options-card no-print" data-options-card="theme-language">
                    <div class="glass-profile option-section h-100">

                        {% if config.allow_user_theme_override and MICROSYS_THEMES|length > 1 %}
                            <div class="mb-4">
                                <h4 class="mb-3"><i class="bi bi-palette me-2"></i> {{ MS_TRANS.themes }}</h4>
                                <p class="text-muted small mb-4">{{ MS_TRANS.themes_desc }}</p>
                                {% include 'microsys/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 MICROSYS_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> {{ MS_TRANS.language }}</h4>
                                <p class="text-muted small mb-4">{{ MS_TRANS.language_desc }}</p>

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

                    </div>
                </div>

            {% endif %}

        {% endif %}

        <!-- Table Density -->
        <div class="ms-options-card no-print">
            <div class="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-table me-2"></i> {{ MS_TRANS.table_density|default:"Table Density" }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.table_density_desc|default:"Control how much vertical space data tables use while you work." }}</p>
                {% include 'microsys/includes/table_density_previews.html' with selected_density=user_preferences.table_density|default:APP_CONFIG.default_table_density picker_mode='options' density_choices=MICROSYS_TABLE_DENSITIES MS_TRANS=MS_TRANS %}
            </div>
        </div>

        {% if config.sidebar.allow_user_density %}
        <!-- Sidebar Density -->
        <div class="ms-options-card no-print" data-options-card="sidebar-density">
            <div class="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-layout-sidebar-inset me-2"></i> {{ MS_TRANS.sidebar_density|default:"Sidebar Density" }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.sidebar_density_desc|default:"Control how much vertical space the sidebar navigation uses while you work." }}</p>
                {% include 'microsys/includes/sidebar_density_previews.html' with selected_density=user_preferences.sidebar_density|default:sidebar_density|default:config.sidebar.density picker_mode='options' density_choices=MICROSYS_TABLE_DENSITIES MS_TRANS=MS_TRANS %}
            </div>
        </div>
        {% endif %}

        <!-- Autofill -->
        <div class="ms-options-card no-print">
            <div class="glass-profile option-section h-100">
                <h4 class="mb-3"><i class="bi bi-magic me-2"></i> {{ MS_TRANS.autofill }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.autofill_desc }}</p>

                <div class="d-flex justify-content-between align-items-center p-3 border rounded bg-light">
                    <span>{{ MS_TRANS.on_off }}</span>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="autofillToggle" checked>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reset Defaults -->
        <div class="ms-options-card no-print">
            <div class="glass-profile option-section h-100 border-danger">
                <h4 class="mb-3 text-danger"><i class="bi bi-exclamation-triangle me-2"></i> {{ MS_TRANS.reset_defaults }}</h4>
                <p class="text-muted small mb-4">{{ MS_TRANS.reset_desc }}</p>

                <div class="d-flex justify-content-end align-items-center p-3 border border-danger rounded bg-light">
                    <!-- <span class="text-danger fw-bold">{{ MS_TRANS.reset_btn }}</span> -->

                    <!-- Initial Reset Button -->
                    <button class="btn btn-outline-danger btn-sm" id="btnResetInit">
                        <i class="bi bi-arrow-counterclockwise me-1"></i> {{ MS_TRANS.reset_btn }}
                    </button>

                    <!-- Confirm/Cancel Actions (Hidden initially) -->
                    <div id="resetActions" style="display: none;">
                        <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> {{ MS_TRANS.confirm }}
                            </button>
                            <button type="button" class="btn btn-secondary btn-sm" id="btnResetCancel">
                                <i class="bi bi-x-lg me-1"></i> {{ MS_TRANS.cancel }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% if user.is_superuser %}
        <!-- System Settings -->
        <div class="ms-options-card">
            <div class="card h-100 p-4 border-0 ms-card shadow-sm blur">
                <div class="d-flex align-items-center mb-3">
                    <div class="rounded-circle bg-warning bg-opacity-10 p-3 me-3 ms-icon-box">
                        <i class="bi bi-sliders text-warning fs-3"></i>
                    </div>
                    <h5 class="card-title fw-bold mb-0 text-body">
                        {{ MS_TRANS.system_settings_label }}
                    </h5>
                </div>
                <p class="text-muted small mb-3">{{ MS_TRANS.system_settings_desc }}</p>
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-warning rounded-pill fw-bold"
                            data-dynamic-modal="{% url 'modal_manager' 'microsys' 'SystemSettings' 1 %}?step=0"
                            data-modal-title="{{ MS_TRANS.system_settings_branding }}">
                        <i class="bi bi-palette-fill me-2"></i> {{ MS_TRANS.system_settings_branding }}
                    </button>
                    <button class="btn btn-outline-warning rounded-pill fw-bold"
                            data-dynamic-modal="{% url 'modal_manager' 'microsys' 'SystemSettings' 1 %}?step=1"
                            data-modal-title="{{ MS_TRANS.system_settings_languages }}">
                        <i class="bi bi-translate me-2"></i> {{ MS_TRANS.system_settings_languages }}
                    </button>
                    <button class="btn btn-outline-warning rounded-pill fw-bold"
                            data-dynamic-modal="{% url 'modal_manager' 'microsys' 'SystemSettings' 1 %}?step=2"
                            data-modal-title="{{ MS_TRANS.system_settings_security|default:'Access & Security' }}">
                        <i class="bi bi-shield-lock me-2"></i> {{ MS_TRANS.system_settings_security|default:'Access & Security' }}
                    </button>
                    <button class="btn btn-outline-warning rounded-pill fw-bold"
                            data-dynamic-modal="{% url 'modal_manager' 'microsys' 'SystemSettings' 1 %}?step=3"
                            data-modal-title="{{ MS_TRANS.system_settings_sidebar }}">
                        <i class="bi bi-layout-sidebar-inset me-2"></i> {{ MS_TRANS.system_settings_sidebar }}
                    </button>
                    <button class="btn btn-outline-warning rounded-pill fw-bold"
                            data-dynamic-modal="{% url 'modal_manager' 'microsys' 'SystemSettings' 1 %}?step=4"
                            data-modal-title="{{ MS_TRANS.system_settings_appearance }}">
                        <i class="bi bi-window-stack me-2"></i> {{ MS_TRANS.system_settings_appearance }}
                    </button>
                    <a class="btn btn-outline-secondary rounded-pill fw-bold"
                       href="{% url 'system_settings_export' %}">
                        <i class="bi bi-download me-2"></i> {{ MS_TRANS.system_settings_export|default:"Export setup file" }}
                    </a>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <style nonce="{{ request.csp_nonce }}">
        .ms-options-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
            align-items: stretch;
        }
        @media (max-width: 576px) {
            .ms-options-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }
        .ms-options-card {
            min-width: 0; /* Prevent grid blowout */
        }
    </style>
        <script nonce="{{ request.csp_nonce }}">
            document.addEventListener('DOMContentLoaded', () => {
                // --- Autofill Logic ---
                const toggle = document.getElementById('autofillToggle');
                const densityPicker = document.querySelector('.ms-table-density-picker:not([data-setup-table-density-picker]):not(.ms-sidebar-density-picker)');
                const densityOptions = densityPicker ? Array.from(densityPicker.querySelectorAll('.ms-density-option[data-table-density]')) : [];
                const sidebarDensityPicker = document.querySelector('.ms-sidebar-density-picker');
                const sidebarDensityOptions = sidebarDensityPicker ? Array.from(sidebarDensityPicker.querySelectorAll('.ms-density-option[data-sidebar-density]')) : [];
                const currentDensity = (window.USER_PREFS && window.USER_PREFS.table_density) || '{{ user_preferences.table_density|default:APP_CONFIG.default_table_density }}';
                const currentSidebarDensity = (window.USER_PREFS && window.USER_PREFS.sidebar_density) || '{{ user_preferences.sidebar_density|default:sidebar_density|default:config.sidebar.density }}';

                function updateTableDensityUI(activeDensity) {
                    densityOptions.forEach((option) => {
                        option.classList.toggle('is-active', option.getAttribute('data-table-density') === activeDensity);
                    });
                }

                function updateSidebarDensityUI(activeDensity) {
                    sidebarDensityOptions.forEach((option) => {
                        option.classList.toggle('is-active', option.getAttribute('data-sidebar-density') === activeDensity);
                    });
                }

                updateTableDensityUI(currentDensity);
                updateSidebarDensityUI(currentSidebarDensity);
                
                function toggleAutofill() {
                    const isEnabled = toggle.checked; // true or false
                    
                    // 1. Set Cookie for Server-Side
                    const d = new Date();
                    d.setTime(d.getTime() + (365*24*60*60*1000));
                    let expires = "expires="+ d.toUTCString();
                    document.cookie = "enable_prefill=" + isEnabled + ";" + expires + ";path=/";

                    // 2. Set LocalStorage for Client-Side persistence/sync if needed
                    localStorage.setItem('enable_prefill', isEnabled);

                    // 3. Show Feedback
                    if (typeof showToast === 'function') {
                        showToast(isEnabled ? '{{ MS_TRANS.autofill_enabled }}' : '{{ MS_TRANS.autofill_disabled }}');
                    }
                }

                // Check cookie first
                const getCookie = (name) => {
                    const value = `; ${document.cookie}`;
                    const parts = value.split(`; ${name}=`);
                    if (parts.length === 2) return parts.pop().split(';').shift();
                    return null;
                };
                
                const cookieVal = getCookie('enable_prefill');
                
                if (cookieVal !== null) {
                    toggle.checked = (cookieVal === 'true');
                } else {
                    // Default to true if not set
                    toggle.checked = true;
                }

                // Attach event listener
                if (toggle) {
                    toggle.addEventListener('change', toggleAutofill);
                }

                // --- Theme Logic (Delegated) ---
                document.querySelectorAll('[data-theme]').forEach(el => {
                    el.addEventListener('click', function() {
                        const theme = this.getAttribute('data-theme');
                        if (window.setTheme) {
                            window.setTheme(theme);
                            // Also save preference to backend if available
                            if (window.updatePreferences) {
                                window.updatePreferences({ theme: theme });
                            }
                        }
                    });
                });



                // --- Accessibility Logic (Delegated) ---
                document.querySelectorAll('.accessibility-switch').forEach(el => {
                    el.addEventListener('change', function() {
                        const mode = this.getAttribute('data-accessibility');
                        if (window.setAccessibilityMode) {
                            window.setAccessibilityMode(mode);
                        }
                    });
                });

                // --- Language Logic (Delegated) ---
                document.querySelectorAll('[data-lang]').forEach(el => {
                    el.addEventListener('click', function() {
                        const lang = this.getAttribute('data-lang');
                        if (window.setLanguage) {
                            window.setLanguage(lang);
                        }
                    });
                });

                // --- Table Density Logic ---
                densityOptions.forEach((option) => {
                    option.addEventListener('click', function() {
                        const density = this.getAttribute('data-table-density') || 'balanced';
                        updateTableDensityUI(density);
                        if (window.USER_PREFS) {
                            window.USER_PREFS.table_density = density;
                        }
                        if (window.updatePreferences) {
                            window.updatePreferences({ table_density: density });
                        }
                    });
                });

                sidebarDensityOptions.forEach((option) => {
                    option.addEventListener('click', function() {
                        const density = this.getAttribute('data-sidebar-density') || 'balanced';
                        updateSidebarDensityUI(density);
                        if (window.USER_PREFS) {
                            window.USER_PREFS.sidebar_density = density;
                        }
                        const sidebar = document.getElementById('sidebar');
                        if (sidebar) {
                            sidebar.setAttribute('data-sidebar-density', density);
                        }
                        if (window.updatePreferences) {
                            window.updatePreferences({ sidebar_density: density });
                        }
                    });
                });

                // --- Reset Defaults Logic ---
                const btnInit = document.getElementById('btnResetInit');
                const actionsDiv = document.getElementById('resetActions');
                const btnConfirm = document.getElementById('btnResetConfirm');
                const btnCancel = document.getElementById('btnResetCancel');

                // 1. Show Confirm/Cancel with animation
                if (btnInit) {
                    btnInit.addEventListener('click', function() {
                        // Fade out init button
                        this.style.transition = 'opacity 0.2s';
                        this.style.opacity = '0';
                        
                        setTimeout(() => {
                            this.style.display = 'none';
                            // Show actions
                            actionsDiv.style.opacity = '0';
                            actionsDiv.style.display = 'block';
                            actionsDiv.style.transition = 'opacity 0.3s';
                            
                            // Trigger reflow
                            void actionsDiv.offsetWidth;
                            actionsDiv.style.opacity = '1';
                            
                            // Anime.js or simple css transition could be used here for more flair if needed,
                            // but CSS transition is lightweight and sufficient.
                        }, 200);
                    });
                }

                // 2. Cancel Action
                if (btnCancel) {
                    btnCancel.addEventListener('click', function() {
                        actionsDiv.style.opacity = '0';
                        setTimeout(() => {
                            actionsDiv.style.display = 'none';
                            btnInit.style.display = 'block';
                            void btnInit.offsetWidth;
                            btnInit.style.opacity = '1';
                        }, 200);
                    });
                }

                // 3. Confirm Action
                if (btnConfirm) {
                    btnConfirm.addEventListener('click', function() {
                        // Show loading state on confirm button
                        const originalContent = this.innerHTML;
                        this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
                        this.disabled = true;
                        btnCancel.disabled = true;

                        fetch('{% url "reset_preferences" %}', {
                            method: 'POST',
                            headers: {
                                'X-CSRFToken': '{{ csrf_token }}',
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({})
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Clear LocalStorage Forcefully
                                const keysToRemove = [];
                                for (let i = 0; i < localStorage.length; i++) {
                                    const key = localStorage.key(i);
                                    // Identify keys to remove: sidebar_*, appTheme, appLanguage, accessibilityMode, enable_prefill
                                    if (key.startsWith('sidebar_') || 
                                        key === 'appTheme' || 
                                        key === 'appLanguage' || 
                                        key === 'accessibilityMode' || 
                                        key === 'enable_prefill') {
                                        keysToRemove.push(key);
                                    }
                                }
                                keysToRemove.forEach(k => localStorage.removeItem(k));
                                
                                alert('{{ MS_TRANS.reset_success }}');
                                location.reload();
                            } else {
                                alert('Error: ' + (data.error || 'Unknown error'));
                                this.innerHTML = originalContent;
                                this.disabled = false;
                                btnCancel.disabled = false;
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Request failed.');
                            this.innerHTML = originalContent;
                            this.disabled = false;
                            btnCancel.disabled = false;
                        });
                    });
                }
            });
        </script>
{% endblock %}