{% extends 'unfold/layouts/unauthenticated.html' %}
{% load i18n unfold %}
{% block extrastyle %}
    {{ block.super }}
    <script nonce="{{ csp_nonce }}">
        document.addEventListener("DOMContentLoaded", function() {
            // Translate "Return to site" link in top bar
            const topBar = document.querySelector('.absolute.flex.flex-row.items-center.justify-between, .absolute.top-0');
            if (topBar) {
                const backLink = topBar.querySelector('a[href="/"]');
                if (backLink) {
                    backLink.innerHTML = `
                        <span class="material-symbols-outlined text-lg">arrow_forward</span>
                        <span class="ml-8">{% trans "Return to site" %}</span>
                    `;
                    backLink.classList.add('flex', 'items-center', 'gap-2');
                }
            }

            const themeToggle = document.querySelector('a[x-on\\:click*="openTheme = !openTheme"]');
            if (themeToggle) {
                themeToggle.innerHTML = `
              <span class="material-symbols-outlined" x-text="adminTheme == 'dark' &amp;&amp; 'dark_mode' || adminTheme == 'light' &amp;&amp; 'light_mode' || 'computer'"></span> `;
            }

            // Translate Theme Toggle Options
            const themeOptions = document.querySelectorAll('a[x-on\\:click*="adminTheme"]');
            themeOptions.forEach(opt => {
                const icon = opt.querySelector('.material-symbols-outlined');
                const textSpan = opt.querySelector('span.self-center');
                opt.classList.add('gap-3');

                if (icon && textSpan) {
                    const iconName = icon.innerText.trim();
                    if (iconName === 'light_mode') textSpan.innerText = '{% trans "Light" %}';
                    else if (iconName === 'dark_mode') textSpan.innerText = '{% trans "Dark" %}';
                    else if (iconName.includes('computer')) textSpan.innerText = '{% trans "System" %}';
                }
            });
        });
    </script>
{% endblock %}
{% block title %}
    {{ title }} | {{ site_title }}
{% endblock %}
{% block content %}
    <div class="mb-8 text-center">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
            {% trans "You have been successfully logged out from the administration" %}
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            {% trans "Thanks for spending some quality time with the web site today." %}
        </p>
    </div>
    {% url "admin:index" as login_url %}
    <div class="flex flex-col gap-3 mt-6">
        {% component "unfold/components/button.html" with href=login_url variant="primary" class="w-full" %}
            {% trans "Log in again" %} <span class="material-symbols-outlined relative right-0 transition-all group-hover:-right-1 text-sm">arrow_back</span>
        {% endcomponent %}
    </div>
{% endblock %}