{# =====================================================================
   MODAL: Ustawienia użytkownika
   ===================================================================== #}
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="settingsModalLabel">
                    <i class="bi bi-gear-fill me-2"></i>{{ translations.settings }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">

                {# ---- SEKCJA 1: Język interfejsu ---- #}
                <section class="mb-5">
                    <h6 class="fw-bold text-uppercase text-muted border-bottom pb-2 mb-3">
                        <i class="bi bi-translate me-1"></i> Język interfejsu
                    </h6>

                    <div class="alert alert-warning d-flex align-items-start gap-2 py-2 mb-3" role="alert">
                        <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                        <small>
                            Zmiana języka jest <strong>tymczasowa</strong> i obowiązuje wyłącznie podczas bieżącej sesji.
                            Po wylogowaniu lub zamknięciu przeglądarki zostanie przywrócony język domyślny przypisany do Twojego konta.
                        </small>
                    </div>

                    {% set languages = [
                        {code: 'pl', label: 'Polski',     flag: '🇵🇱'},
                        {code: 'fr', label: 'Français',   flag: '🇫🇷'},
                        {code: 'nl', label: 'Nederlands', flag: '🇳🇱'},
                        {code: 'it', label: 'Italiano',   flag: '🇮🇹'},
                        {code: 'en', label: 'English',    flag: '🇬🇧'}
                    ] %}

                    <div class="d-flex flex-wrap gap-2" id="langSwitcher">
                        {% for lang in languages %}
                            <button
                                type="button"
                                class="btn btn-sm {{ current_lang == lang.code ? 'btn-primary' : 'btn-outline-secondary' }} lang-btn"
                                data-lang="{{ lang.code }}"
                            >
                                {{ lang.flag }}&nbsp;{{ lang.label }}
                            </button>
                        {% endfor %}
                    </div>

                    <div id="langFeedback" class="mt-2 small d-none">
                        <i class="bi bi-check-circle-fill me-1"></i><span></span>
                    </div>
                </section>

                {# ---- Miejsce na przyszłe sekcje ustawień ---- #}

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
            </div>

        </div>
    </div>
</div>

{# =====================================================================
   NAVBAR
   ===================================================================== #}
<nav class="navbar navbar-expand navbar-light ">
    <div class="container-fluid">
        <a href="#" class="burger-btn d-block">
            <i class="bi bi-justify fs-3"></i>
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

                <!--                <li class="nav-item dropdown me-1">-->
                <!--                    <a class="nav-link active dropdown-toggle" href="#" data-bs-toggle="dropdown"-->
                <!--                       aria-expanded="false">-->
                <!--                        <i class='bi bi-envelope bi-sub fs-4 text-gray-600'></i>-->
                <!--                    </a>-->
                <!--                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">-->
                <!--                        <li>-->
                <!--                            <h6 class="dropdown-header">Mail</h6>-->
                <!--                        </li>-->
                <!--                        <li><a class="dropdown-item" href="#">No new mail</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->

                <li class="nav-item dropdown me-3">
                    <a class="nav-link active dropdown-toggle" href="#" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        <i class='bi bi-bell bi-sub fs-4 text-gray-600'></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                        <li>
                            <h6 class="dropdown-header">{{ translations.notifications }}</h6>
                        </li>
                        <li><a class="dropdown-item">{{ translations.no_new_notifications }}</a></li>
                    </ul>
                </li>
            </ul>
            <div class="dropdown">
                <a href="#" data-bs-toggle="dropdown" aria-expanded="false">
                    <div class="user-menu d-flex">
                        <div class="user-name text-end me-3">
                            <h6 class="mb-0 text-gray-600">{{ user.displayName }}</h6>
                            <p class="mb-0 text-sm text-gray-600">{{ user.role }}</p>
                        </div>
                        <div class="user-img d-flex align-items-center">
                            <div class="avatar avatar-md">
                                <!-- TODO: dodać logo -->
                                <img src="{{ root }}/assets/images/default-avatar.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                    <li>
                        <h6 class="dropdown-header">{{ translations.hello }}</h6>
                    </li>
                    <!--                    <li><a class="dropdown-item" href="#"><i class="icon-mid bi bi-person me-2"></i> My-->
                    <!--                            Profile</a></li>-->
                    <li>
                        <a class="dropdown-item" href="#"
                           data-bs-toggle="modal" data-bs-target="#settingsModal">
                            <i class="icon-mid bi bi-gear me-2"></i>{{ translations.settings }}
                        </a>
                    </li>
                    <!--                    <li><a class="dropdown-item" href="#"><i class="icon-mid bi bi-wallet me-2"></i>-->
                    <!--                            Wallet</a></li>-->
                    <!--                    <li>-->
                    <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="{{ root }}/logout"><i
                                    class="icon-mid bi bi-box-arrow-left me-2"></i>{{ translations.logout }}</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

{# =====================================================================
   JS: obsługa zmiany języka
   ===================================================================== #}
<script>
(function () {
    document.addEventListener('DOMContentLoaded', function () {
        const langSwitcher = document.getElementById('langSwitcher');
        const feedback     = document.getElementById('langFeedback');
        const feedbackText = feedback ? feedback.querySelector('span') : null;

        if (!langSwitcher) return;

        langSwitcher.addEventListener('click', function (e) {
            const btn = e.target.closest('.lang-btn');
            if (!btn) return;

            const langCode = btn.dataset.lang;

            // Zablokuj wielokrotne kliknięcia podczas requesta
            langSwitcher.querySelectorAll('.lang-btn').forEach(function (b) { b.disabled = true; });

            fetch('{{ root }}/ajax/settings/language', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ lang_code: langCode }),
            })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.success) {
                    // Wizualnie zaznacz wybrany język
                    langSwitcher.querySelectorAll('.lang-btn').forEach(function (b) {
                        b.classList.remove('btn-primary');
                        b.classList.add('btn-outline-secondary');
                    });
                    btn.classList.remove('btn-outline-secondary');
                    btn.classList.add('btn-primary');

                    // Komunikat + przeładowanie
                    if (feedbackText) {
                        feedbackText.textContent = 'Język zmieniony. Trwa przeładowanie strony\u2026';
                    }
                    if (feedback) {
                        feedback.classList.remove('d-none', 'text-danger');
                        feedback.classList.add('text-success');
                    }
                    setTimeout(function () { window.location.reload(); }, 900);
                } else {
                    throw new Error(data.message || 'Nieznany błąd');
                }
            })
            .catch(function (err) {
                if (feedbackText) {
                    feedbackText.textContent = 'Błąd: ' + err.message;
                }
                if (feedback) {
                    feedback.classList.remove('d-none', 'text-success');
                    feedback.classList.add('text-danger');
                }
                // Odblokuj przyciski po błędzie
                langSwitcher.querySelectorAll('.lang-btn').forEach(function (b) { b.disabled = false; });
            });
        });
    });
}());
</script>