{% extends 'dlux/form_base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}{{ DLUX_STRINGS.system_setup_title|default:"System Setup" }}{% endblock %}

{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'dlux/main/css/system_setup.css' %}?v=20260621a">
{% endblock %}

{% block layout %}
<div class="dlux-setup-viewport">
    <div class="card border-0 shadow-sm dlux-setup-page">
        <form method="post" enctype="multipart/form-data" class="dlux-system-setup-form dlux-form">
            {% csrf_token %}
            <div class="dlux-setup-scroll" data-dlux-setup-scroll>
                <div class="dlux-setup-intro">
                    <div class="dlux-setup-intro__text">
                        <h2 class="dlux-setup-intro__title">{{ DLUX_STRINGS.system_setup_title|default:"System Setup" }}</h2>
                        <p class="dlux-setup-intro__desc">{{ DLUX_STRINGS.system_setup_page_desc|default:"Complete the initial branding, languages, and sidebar structure for Dlux." }}</p>
                    </div>
                    <img src="{{ APP_CONFIG.login_logo_url|default:APP_CONFIG.logo_url }}" alt="Logo" class="dlux-setup-page-logo">
                </div>
            <nav class="dlux-setup-step-nav"
                             aria-label="{{ DLUX_STRINGS.system_setup_step_nav_aria }}"
                             data-dlux-wizard-step-nav>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="0">
                                <span class="dlux-setup-step-nav__bullet">1</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_branding }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="1">
                                <span class="dlux-setup-step-nav__bullet">2</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_languages }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="2">
                                <span class="dlux-setup-step-nav__bullet">3</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_security }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="3">
                                <span class="dlux-setup-step-nav__bullet">4</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_login_page }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="4">
                                <span class="dlux-setup-step-nav__bullet">5</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_sidebar }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="5">
                                <span class="dlux-setup-step-nav__bullet">6</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_navbar }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="6">
                                <span class="dlux-setup-step-nav__bullet">7</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_ui_layout }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="7">
                                <span class="dlux-setup-step-nav__bullet">8</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_notifications }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="8">
                                <span class="dlux-setup-step-nav__bullet">9</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_appearance }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="9">
                                <span class="dlux-setup-step-nav__bullet">10</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_logging|default:"Logging" }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="10">
                                <span class="dlux-setup-step-nav__bullet">11</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_profile|default:"Profile Page" }}</span>
                            </button>
                            <button class="dlux-setup-step-nav__item"
                                    type="button"
                                    data-dlux-wizard-step-target="11">
                                <span class="dlux-setup-step-nav__bullet">12</span>
                                <span class="dlux-setup-step-nav__label">{{ DLUX_STRINGS.system_settings_backups|default:"Backups" }}</span>
                            </button>
            </nav>
                {% crispy form %}
            </div>
            <div class="dlux-setup-footer" data-dlux-setup-footer></div>
        </form>
    </div>
</div>
{% endblock %}