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

{% block title %}Pronostics{% endblock %}

{% block body %}
    <section class="ta-topbar">
        <div>
            <h1 class="ta-page-title">Mes pronostics</h1>
            <p class="ta-page-subtitle">Pronostique les scores des matchs.</p>
        </div>
    </section>

    <section class="ta-card {{ prono_access_blocked|default(false) ? 'match-dashboard-wrap--locked' : '' }}">
        <div class="ta-table-wrap">
            <table class="ta-table">
                <thead>
                    <tr>
                        <th>Match</th>
                        <th>Date</th>
                        <th>Pronostic</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% 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 default_prono_cutoff_day_shown = false %}
                    {% for match in matches %}
                        {% set match_day = match.dateHeure ? match.dateHeure|date('Y-m-d') : '' %}
                        {% if default_prono_cutoff_day and match_day == default_prono_cutoff_day and not default_prono_cutoff_day_shown %}
                            <tr class="match-default-prono-cutoff-notice--table">
                                <td colspan="4">
                                    {% include 'competition/_default_prono_cutoff_notice.html.twig' with { match: default_prono_cutoff } only %}
                                </td>
                            </tr>
                            {% set default_prono_cutoff_day_shown = true %}
                        {% endif %}
                        {% set pronostic = pronostics_by_match_id[match.id] ?? null %}
                        {% set prono_blocked = prono_access_blocked|default(false) %}
                        {% set cotes_visible = match_cotes_visible(match, now) %}
                        {% set can_pronostic = match.statut == 'SCHEDULED' and match.dateHeure > now and not prono_blocked %}
                        {% set match_prono_blocked_cotisation = prono_blocked and match.statut == 'SCHEDULED' and match.dateHeure > now %}
                        <tr>
                            <td>{{ match.paysDomicile.nom }} - {{ match.paysExterieur.nom }}</td>
                            <td>{{ match.dateHeure|fr_match_datetime }}{% set phase_label = match_phase_label(match) %}{% if phase_label %} · {{ phase_label }}{% endif %}</td>
                            <td>
                                {% if match_prono_blocked_cotisation %}
                                    <span class="match-prono-cotisation-msg">Cotisation requise (10&nbsp;€).</span>
                                {% elseif can_pronostic %}
                                    {% set prono_default_home = prono_form_default_score_domicile(match) %}
                                    {% set prono_default_away = prono_form_default_score_exterieur(match) %}
                                    <form
                                        method="post"
                                        action="{{ path('app_match_pronostic_save', { id: match.id }) }}"
                                        class="match-pronostic-form match-pronostic-form--table flex items-center gap-2 flex-wrap"
                                        data-match-pronostic-autosave
                                        data-match-id="{{ match.id }}"
                                    >
                                        <input
                                            type="number"
                                            name="score_domicile"
                                            min="0"
                                            step="1"
                                            inputmode="numeric"
                                            value="{{ pronostic ? pronostic.scoreDomicile : (prono_default_home is not null ? prono_default_home : '') }}"
                                            class="ta-form-input match-score-input"
                                            style="max-width: 80px;"
                                            required
                                            placeholder="{{ prono_default_home is null and not pronostic ? '0' : '' }}"
                                            aria-label="Score domicile"
                                        >
                                        <span aria-hidden="true">-</span>
                                        <input
                                            type="number"
                                            name="score_exterieur"
                                            min="0"
                                            step="1"
                                            inputmode="numeric"
                                            value="{{ pronostic ? pronostic.scoreExterieur : (prono_default_away is not null ? prono_default_away : '') }}"
                                            class="ta-form-input match-score-input"
                                            style="max-width: 80px;"
                                            required
                                            placeholder="{{ prono_default_away is null and not pronostic ? '0' : '' }}"
                                            aria-label="Score extérieur"
                                        >
                                    </form>
                                {% elseif pronostic %}
                                    <span class="font-semibold">{{ pronostic.scoreDomicile }} - {{ pronostic.scoreExterieur }}</span>
                                {% else %}
                                    <span class="ta-badge">Verrouille</span>
                                {% endif %}
                            </td>
                            <td data-match-pronostic-points data-match-id="{{ match.id }}">
                                {% if pronostic and pronostic.points is not null %}
                                    <span class="ta-badge ta-badge-success" data-match-pronostic-points-value>
                                        {{ pronostic.points|number_format(0, ',', ' ') }} pts
                                    </span>
                                    {% if cotes_visible and pronostic.coteCoefficient is not null and pronostic.pointsBase is not null %}
                                        <div class="text-xs text-slate-500 mt-1">
                                            Base: {{ pronostic.pointsBase }} x Cote: {{ pronostic.coteCoefficient|number_format(2, ',', ' ') }}
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <span class="ta-badge ta-badge-warning">-</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="4">Aucun match disponible pour le moment.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/match-pronostic-autosave.js') }}?v=2" defer></script>
{% endblock %}