{% extends '@Tabler/layout_horizontal.html.twig' %}

{% block title %}UCL Manager League{% endblock %}

{# Opis do zajawki linku; strony publiczne nadpisuja go czyms konkretnym #}
{% block description %}Rozgrywki w formacie Ligi Mistrzów — punktacja z gaming.uefa.com.{% endblock %}

{# Tabler sam ustawia motyw z preferencji systemu; ten skrypt biegnie po nim
   i przywraca wybór zapamiętany przez użytkownika — przed pierwszym malowaniem,
   więc strona nie mrugnie jasnym tłem. #}
{% block head %}
    {{ parent() }}
    {% include '_partial/favicon.html.twig' %}

    {# Bez tego komunikatory pokazuja w zajawce sam adres domeny i nie widac,
       ktore to rozgrywki ani ktora kolejka #}
    <meta name="description" content="{{ block('description') }}">
    <meta property="og:site_name" content="UCL Manager League">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ block('title') }}">
    <meta property="og:description" content="{{ block('description') }}">
    <meta property="og:url" content="{{ app.request.uri }}">
    <meta property="og:image" content="{{ absolute_url(asset('apple-touch-icon.png')) }}">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ block('title') }}">
    <meta name="twitter:description" content="{{ block('description') }}">
    <meta name="twitter:image" content="{{ absolute_url(asset('apple-touch-icon.png')) }}">
    <script>
        (function () {
            try {
                var saved = localStorage.getItem('ucl-theme');
                if (saved === 'dark' || saved === 'light') {
                    document.documentElement.setAttribute('data-bs-theme', saved);
                }
            } catch (e) {
                /* prywatne okno albo zablokowane dane stron - zostaje motyw systemowy */
            }
        })();
    </script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* herb wypełnia wysokość karty meczu, a proporcje trzyma object-fit */
        .fixture-crest { align-self: stretch; width: 3.5rem; object-fit: contain; }
        .fixture-crest-sm { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; object-fit: contain; }
        /* bez tego text-truncate nie zadziala: element flex nie chce zejsc ponizej swojej tresci */
        .fixture-shrink { min-width: 0; }
        /* kolejek jest siedemnascie — na telefonie maja sie przewijac, a nie zawijac */
        .nav-rounds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
        .nav-rounds::-webkit-scrollbar { display: none; }
        .nav-rounds .nav-link { white-space: nowrap; }
    </style>
{% endblock %}

{% block app_logo %}<span class="navbar-brand-text">UCL Manager League</span>{% endblock %}

{# Tabler dostarcza layout z treściami demonstracyjnymi — czyścimy je,
   a poszczególne widoki nadpisują tylko to, czego naprawdę potrzebują. #}
{% block page_pretitle %}{% endblock %}
{% block page_subtitle %}{% endblock %}
{% block page_actions %}{% endblock %}
{% block navbar_search %}{% endblock %}
{% block navbar_notifications %}{% endblock %}

{% block footer %}
    <footer class="footer footer-transparent d-print-none">
        <div class="container-xl">
            <div class="row text-center align-items-center">
                <div class="col-12 text-body-secondary">
                    UCL Manager League — punktacja z gaming.uefa.com
                </div>
            </div>
        </div>
    </footer>
{% endblock %}

{% block navbar_menu %}{% include '_partial/menu.html.twig' %}{% endblock %}
{% block navbar_menu_condensed %}{% include '_partial/menu.html.twig' %}{% endblock %}

{% block navbar_user %}
    <div class="d-flex align-items-center gap-2">
        <button type="button" id="theme-toggle" class="btn btn-icon btn-ghost-secondary"
                title="Przełącz tryb jasny i ciemny" aria-label="Przełącz tryb jasny i ciemny">
            <svg id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/>
            </svg>
            <svg id="theme-icon-light" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-none">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/>
                <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"/>
            </svg>
        </button>

        {% if is_granted('ROLE_ADMIN') %}
            <a class="btn btn-outline-secondary btn-sm" href="{{ path('app_logout') }}">Wyloguj</a>
        {% else %}
            <a class="btn btn-outline-secondary btn-sm" href="{{ path('app_login') }}">Zaloguj</a>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            var button = document.getElementById('theme-toggle');
            var iconDark = document.getElementById('theme-icon-dark');
            var iconLight = document.getElementById('theme-icon-light');

            // atrybut hidden tu nie wystarczy: Tabler nadaje svg display:block,
            // a regula autora bije [hidden] z arkusza przegladarki
            function showIconFor(theme) {
                iconDark.classList.toggle('d-none', theme === 'dark');
                iconLight.classList.toggle('d-none', theme !== 'dark');
            }

            showIconFor(document.documentElement.getAttribute('data-bs-theme'));

            button.addEventListener('click', function () {
                var next = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';

                document.documentElement.setAttribute('data-bs-theme', next);
                showIconFor(next);

                try {
                    localStorage.setItem('ucl-theme', next);
                } catch (e) {
                    /* bez zapamietania - motyw wroci do systemowego po odswiezeniu */
                }
            });
        })();
    </script>
{% endblock %}