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

{% block title %}Matchs | LPF 2026{% endblock %}

{% block body %}
{#
    <section class="ta-topbar">
        <div>
            <h1 class="ta-page-title">Matchs</h1>
            <p class="ta-page-subtitle">Pronostique avant le coup d'envoi et consulte les resultats apres match.</p>
        </div>
    </section>

    <section class="ta-card">
        <div class="ta-dashboard-matchdays-head">
            <div>
                <h2 class="ta-card-title">Calendrier dynamique</h2>
                <p class="ta-card-text">Les pronostics restent modifiables tant que le match n'a pas commence.</p>
            </div>
            <a href="{{ path('app_pronostics') }}" class="btn btn-primary btn-sm">
                Faire mes pronostics
                <i class="ti ti-target" aria-hidden="true"></i>
            </a>
        </div>
    </section>
    #}

    {% if matchday_nav is not empty %}
        <nav class="match-day-nav mt-5" aria-label="Accès rapide aux journées">
            <p class="match-day-nav-label">Journées</p>

            <ul class="match-day-nav-list match-day-nav-list--desktop">
                {% for item in matchday_nav %}
                    <li>
                        <a
                            href="#{{ item.anchor }}"
                            class="match-day-nav-link{{ item.date_key == featured_matchday_key ? ' match-day-nav-link--featured' : '' }}"
                        >
                            {% if item.date_for_label %}
                                {{ item.date_for_label|fr_date_long }}{% if item.phase_label %} · {{ item.phase_label }}{% endif %}
                            {% else %}
                                Date à définir
                            {% endif %}
                        </a>
                    </li>
                {% endfor %}
            </ul>

            <div class="match-day-nav-select-wrap">
                <label class="sr-only" for="match-day-nav-select">Choisir une journée</label>
                <select id="match-day-nav-select" class="match-day-nav-select" aria-label="Choisir une journée">
                    {% for item in matchday_nav %}
                        <option
                            value="#{{ item.anchor }}"
                            {{ item.date_key == featured_matchday_key ? 'selected' : '' }}
                        >
                            {% if item.date_for_label %}
                                {{ item.date_for_label|fr_date_long }}{% if item.phase_label %} · {{ item.phase_label }}{% endif %}
                            {% else %}
                                Date à définir
                            {% endif %}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </nav>

        <script>
            (function initMatchDayNavSelect() {
                const featuredAnchor = {{ featured_matchday_key ? ('"#journee-' ~ featured_matchday_key ~ '"')|raw : 'null' }};

                const bind = () => {
                    const select = document.getElementById('match-day-nav-select');
                    if (!select || select.dataset.bound === '1') {
                        return;
                    }
                    select.dataset.bound = '1';

                    const scrollToAnchor = (hash, behavior = 'smooth') => {
                        if (!hash || hash === '#') {
                            return false;
                        }
                        const id = hash.replace(/^#/, '');
                        const block = document.getElementById(id);
                        if (!block) {
                            return false;
                        }
                        block.scrollIntoView({ behavior, block: 'start' });
                        history.replaceState(null, '', '#' + id);
                        return true;
                    };

                    const hash = window.location.hash;
                    if (hash) {
                        select.value = hash;
                        requestAnimationFrame(() => {
                            scrollToAnchor(hash, 'auto');
                        });
                    } else if (featuredAnchor) {
                        select.value = featuredAnchor;
                        requestAnimationFrame(() => {
                            scrollToAnchor(featuredAnchor, 'auto');
                        });
                    }

                    select.addEventListener('change', () => scrollToAnchor(select.value));
                };

                document.addEventListener('DOMContentLoaded', bind);
                document.addEventListener('turbo:load', bind);
            })();
        </script>
    {% endif %}

    <section class="match-dashboard-wrap mt-5 {{ prono_access_blocked|default(false) ? 'match-dashboard-wrap--locked' : '' }}">
        {% if matches is empty %}
            <p class="ta-card-text">Aucun match disponible pour le moment.</p>
        {% else %}
            {% set default_prono_cutoff = default_prono_cutoff_match() %}
            {% set default_prono_cutoff_day = default_prono_cutoff and default_prono_cutoff.dateHeure ? default_prono_cutoff.dateHeure|date('Y-m-d') : null %}
            {% set current_day = null %}
            {% for match in matches %}
                {% set match_day = match.dateHeure ? match.dateHeure|date('Y-m-d') : 'date-inconnue' %}
                {% if match_day != current_day %}
                    {% if not loop.first %}
                            </div>
                        </div>
                    {% endif %}
                    {% set current_day = match_day %}
                    <div id="{{ match_day == 'date-inconnue' ? 'journee-date-inconnue' : 'journee-' ~ match_day }}" class="match-day-section{{ match_day == featured_matchday_key ? ' match-day-section--featured' : '' }}{{ loop.first ? '' : ' mt-6' }}">
                        <h2 class="match-day-title">
                            {{ match.dateHeure ? match.dateHeure|fr_date_long : 'Date à définir' }}{% set day_phase_label = match_phase_label(match) %}{% if day_phase_label %} · {{ day_phase_label }}{% endif %}
                        </h2>
                        {% if default_prono_cutoff_day and match_day == default_prono_cutoff_day %}
                            {% include 'competition/_default_prono_cutoff_notice.html.twig' with { match: default_prono_cutoff } only %}
                        {% endif %}
                        <div class="match-card-grid">
                {% endif %}

                {% set pronostic = pronostics_by_match_id[match.id] ?? null %}
                {% set partner_pronostics = partner_pronostics_by_match_id[match.id] ?? [] %}
                {% include 'competition/_match_card.html.twig' with {
                    match: match,
                    pronostic: pronostic,
                    partner_pronostics: partner_pronostics,
                    now: now,
                    prono_access_blocked: prono_access_blocked|default(false),
                    joker_usage_by_match_id: joker_usage_by_match_id|default({}),
                    espion_intel_by_match_id: espion_intel_by_match_id|default({}),
                    show_joker_ui: show_joker_ui|default(false),
                    team_favorite_highlight: team_favorite_highlight|default(null),
                    match_goals: goals_by_match_id[match.id] ?? [],
                    team_match_points_by_match_id: team_match_points_by_match_id|default({}),
                } only %}

                {% if loop.last %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        {% endif %}
    </section>

    {% if app.user %}
        {% include 'competition/_joker_modal.html.twig' %}
        {% include 'competition/_match_espion_intel_dialog.html.twig' %}
    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if app.user %}
        <script src="{{ asset('js/joker-match.js') }}?v=25" defer></script>
        <script src="{{ asset('js/match-espion-intel.js') }}?v=2" defer></script>
        <script src="{{ asset('js/match-pronostic-autosave.js') }}?v=3" defer data-turbo-track="reload"></script>
    {% endif %}
{% endblock %}