{# match, pronostic, partner_pronostics, now, match_goals, team_match_points, match_joker, is_favorite_country_match, panel_index, multiplex_preview, multiplex_preview_kickoff, multiplex_panel, espion_intel, show_joker_ui, prono_access_blocked #}
{% set is_favorite_country_match = is_favorite_country_match|default(false) %}
{% set match_joker = match_joker|default(null) %}
{% set multiplex_panel = multiplex_panel|default({}) %}
{% set live_view = multiplex_panel.live_view|default(null) %}
{% set is_live = multiplex_panel.is_live|default(false) %}
{% set is_finished = multiplex_panel.is_finished|default(false) %}
{% set team_match_points = multiplex_panel.team_match_points|default(team_match_points|default(null)) %}
{% set panel_index = panel_index|default(0) %}
{% set multiplex_preview = multiplex_preview|default(false) %}
{% set score_home = match.scoreDomicile is not null ? match.scoreDomicile : 0 %}
{% set score_away = match.scoreExterieur is not null ? match.scoreExterieur : 0 %}

<article
    class="match-multiplex-panel"
    id="match-multiplex-panel-{{ match.id }}"
    data-match-multiplex-panel
    data-match-id="{{ match.id }}"
    data-panel-index="{{ panel_index }}"
    {% if panel_index > 0 %}hidden{% endif %}
    aria-labelledby="match-multiplex-tab-{{ match.id }}"
>
    <div class="match-multiplex-panel__scoreboard">
        <div class="match-multiplex-panel__team match-multiplex-panel__team--home">
            {% include 'components/_country_flag_img.html.twig' with {
                country: match.paysDomicile,
                img_classes: 'match-live-score-flag',
                placeholder_class: 'match-live-score-flag match-flag-placeholder',
            } only %}
            <span class="match-multiplex-panel__team-name">{{ country_short_label(match.paysDomicile) }}</span>
        </div>
        <div class="match-multiplex-panel__center">
            <p class="match-multiplex-panel__score" data-match-score>
                <span data-match-score-home>{{ score_home }}</span>
                <span class="match-multiplex-panel__score-sep" aria-hidden="true">-</span>
                <span data-match-score-away>{{ score_away }}</span>
            </p>
            <span class="match-multiplex-panel__clock" data-match-live-clock>
                {% if multiplex_preview %}
                    {{ multiplex_preview_kickoff ? multiplex_preview_kickoff|date('H:i') : match.dateHeure|date('H:i') }}
                {% else %}
                    {{ match_live_clock_label(match) }}
                {% endif %}
            </span>
            {% if multiplex_preview %}
                <span class="ta-badge ta-badge-warning">Aperçu</span>
            {% elseif is_live %}
                <span class="ta-badge ta-badge-warning">En direct</span>
            {% elseif is_finished %}
                <span class="ta-badge ta-badge-success">Terminé</span>
            {% endif %}
        </div>
        <div class="match-multiplex-panel__team match-multiplex-panel__team--away">
            {% include 'components/_country_flag_img.html.twig' with {
                country: match.paysExterieur,
                img_classes: 'match-live-score-flag',
                placeholder_class: 'match-live-score-flag match-flag-placeholder',
            } only %}
            <span class="match-multiplex-panel__team-name">{{ country_short_label(match.paysExterieur) }}</span>
        </div>
    </div>

    {% if match.isKdoMatch or is_favorite_country_match %}
        <div class="match-multiplex-panel__badges">
            {% if match.isKdoMatch %}
                <span class="ta-badge ta-badge-warning"><i class="ti ti-gift" aria-hidden="true"></i> KDO</span>
            {% endif %}
            {% if is_favorite_country_match %}
                <span class="ta-badge ta-badge-primary"><i class="ti ti-shield" aria-hidden="true"></i> Équipe favorite</span>
            {% endif %}
        </div>
    {% endif %}

    <p class="match-multiplex-panel__meta">
        {% set group_letter = match.groupStandingLetter %}
        {% if group_letter %}
            <a href="{{ path('app_groups') }}#groupe-{{ group_letter|lower }}" class="match-group-link">{{ match_phase_label(match) ?: ('Groupe ' ~ group_letter) }}</a>
        {% else %}
            {{ match_phase_label(match) ?: 'Phase à définir' }}
        {% endif %}
        {% if match.venueName %}
            <span class="match-venue"> · {{ match.venueName }}</span>
        {% endif %}
    </p>

    {% include 'competition/_match_multiplex_live_body.html.twig' with {
        match: match,
        pronostic: pronostic,
        partner_pronostics: partner_pronostics|default([]),
        match_goals: match_goals|default([]),
        match_joker: match_joker,
        live_view: live_view,
        is_live: is_live,
        is_finished: is_finished,
        team_match_points: team_match_points,
        espion_intel: espion_intel|default(null),
        show_joker_ui: show_joker_ui|default(false),
        prono_access_blocked: prono_access_blocked|default(false),
        multiplex_preview: multiplex_preview,
    } only %}

    <a
        href="{{ path('app_match_hub', { id: match.id }) }}"
        class="btn btn-warning btn-sm match-multiplex-panel__hub-btn"
    >
        <i class="ti ti-live-photo" aria-hidden="true"></i>
        Hub match complet
    </a>
</article>