{% extends 'base.html.twig' %}

{% block title %}Kolejka {{ gameweek }}{% endblock %}

{% block sidebar %}
    {% include 'gameweek/_sidebar.html.twig' with {'items': sidebarItems} only %}
{% endblock %}

{% block body %}
    <h1>Kolejka {{ gameweek }}</h1>

    {% if needsIdentity %}
        {# Mecz widzi kazdy, czyja druzyna w nim gra — bez wybranej tozsamosci
           nie ma czego filtrowac, wiec zamiast pustej listy pokazujemy
           zaproszenie do wskazania wlasnej druzyny. #}
        <p class="hint">
            Żeby zobaczyć swoje mecze w tej kolejce, wskaż najpierw swoją drużynę.
            <a href="{{ path('identity_select') }}">Wybierz drużynę</a>.
        </p>
    {% else %}
    <p class="freshness">
        {% if syncedMinutesAgo is not null %}
            <span class="stale">Dane sprzed {{ syncedMinutesAgo }} min.</span>
        {% endif %}
        <a class="refresh" href="{{ path('gameweek_show', {'gameweek': gameweek, 'odswiez': 1}) }}">Odśwież</a>
    </p>

    {# Wyszukiwarka jest dla kazdego, kto wskazal swoja druzyne: podswietla
       wylacznie mecze, ktore ten widz i tak oglada, wiec nie daje przewagi
       informacyjnej — inaczej niz zapowiedz przed kolejka, zastrzezona dla
       wlasciciela. Caly blok stoi w galezi z wybrana tozsamoscia, wiec nie
       potrzebuje wlasnego warunku. #}
    {# Zwykly formularz GET bez JavaScriptu — wpisana wartosc laduje w adresie
           (np. /gw/2?zawodnik=Wirtz), wiec wynik da sie odswiezyc i podlinkowac.
       Bez akcji: submit trafia z powrotem na ten sam adres kolejki. #}
    <form method="get" class="player-search" role="search">
        <input
            type="search"
            name="zawodnik"
            class="player-search__input"
            value="{{ playerSearchTerm ?? '' }}"
            placeholder="Szukaj zawodnika, np. Wirtz"
            aria-label="Szukaj zawodnika w tej kolejce"
        >
        <button type="submit" class="button">Szukaj</button>
    </form>

    {% if playerSearchTerm is not null %}
        {% if playerMatches is empty %}
            <p class="hint player-search__result player-search__result--empty">
                Nie znaleziono zawodnika pasującego do „{{ playerSearchTerm }}”.
            </p>
        {% else %}
            <p class="hint player-search__result">
                Znaleziono:
                {%- for element in playerMatches %}
                    {{ ' ' }}{{ element.firstName }} {{ element.secondName }} ({{ element.webName }}){% if not loop.last %},{% endif %}
                {%- endfor %}
            </p>
        {% endif %}
    {% endif %}

    {% if views is empty %}
        <p class="hint">Brak meczów w tej kolejce.</p>
    {% else %}
        {# Wyroznianie ma sens tylko wtedy, gdy fragment faktycznie do kogos pasowal —
           przy braku trafien lista zostaje bez zmian (patrz komunikat "Nie znaleziono" wyzej). #}
        {% set searchActive = playerSearchTerm is not null and playerMatches is not empty %}
        <div class="match-list">
            {% for view in views %}
                {% set fixture = view.fixture %}
                {% set format = fixture.format %}
                {% set highlight = highlights[loop.index0] %}
                {% set rowState = searchActive ? (highlight.isMatched ? 'hit' : 'dim') : null %}
                <a class="match-list__row{% if rowState %} match-list__row--{{ rowState }}{% endif %}" href="{{ path('match_show', {'key': fixture.accessKey}) }}">
                    <span class="match-list__league">
                        {% if fixture.leagueName %}
                            <span class="match-list__league-name">{{ fixture.leagueName }}</span>
                        {% endif %}
                        <span class="match-list__format">{{ format.label }}</span>
                    </span>
                    <span class="match-list__side match-list__side--mine">
                        {{ include('gameweek/_side.html.twig', {'view': view, 'squad': view.mySquad, 'highlight': highlight}) }}
                    </span>
                    {# Kazda liczba i dwukropek to osobna komorka siatki o stalej
                       szerokosci — dzieki temu wyniki wszystkich meczow kolejki
                       stoja w jednej pionowej linii i da sie je porownac wzrokiem. #}
                    <span class="match-list__score match-list__score--mine">{{ view.result.myPoints|number_format(1, ',', ' ') }}</span>
                    <span class="match-list__colon">:</span>
                    <span class="match-list__score match-list__score--opponent">{{ view.result.opponentPoints|number_format(1, ',', ' ') }}</span>
                    <span class="match-list__side match-list__side--opponent">
                        {{ include('gameweek/_side.html.twig', {'view': view, 'squad': view.opponentSquad, 'highlight': highlight}) }}
                    </span>
                    <span class="match-list__outcome badge">{{ view.result.outcome.label }}</span>
                </a>
            {% endfor %}
        </div>
    {% endif %}
    {% endif %}
{% endblock %}