{# live_matches: list<GameMatch>, pronostics_by_match_id, partner_pronostics_by_match_id, goals_by_match_id, team_match_points_by_match_id, joker_usage_by_match_id, team_favorite_highlight, now, compact: bool|false, multiplex_preview, multiplex_preview_kickoff, multiplex_panels_by_match_id, espion_intel_by_match_id, show_joker_ui, prono_access_blocked #}
{% set compact = compact|default(false) %}
{% set multiplex_preview = multiplex_preview|default(false) %}
{% set multiplex_preview_kickoff = multiplex_preview_kickoff|default(null) %}
{% set team_favorite_highlight = team_favorite_highlight|default(null) %}
{% set joker_usage_by_match_id = joker_usage_by_match_id|default({}) %}
{% set espion_intel_by_match_id = espion_intel_by_match_id|default({}) %}
{% set goals_by_match_id = goals_by_match_id|default({}) %}
{% set team_match_points_by_match_id = team_match_points_by_match_id|default({}) %}
{% set multiplex_panels_by_match_id = multiplex_panels_by_match_id|default({}) %}

<div class="match-multiplex{{ compact ? ' match-multiplex--compact' : '' }}" data-match-multiplex>
    <div class="match-multiplex__tabs" role="tablist" aria-label="Matchs en direct">
        {% for match in live_matches %}
            {% set tab_score_home = match.scoreDomicile is not null ? match.scoreDomicile : 0 %}
            {% set tab_score_away = match.scoreExterieur is not null ? match.scoreExterieur : 0 %}
            <button
                type="button"
                class="match-multiplex__tab{{ loop.first ? ' match-multiplex__tab--active' : '' }}"
                role="tab"
                id="match-multiplex-tab-{{ match.id }}"
                aria-selected="{{ loop.first ? 'true' : 'false' }}"
                aria-controls="match-multiplex-panel-{{ match.id }}"
                data-match-multiplex-tab
                data-match-id="{{ match.id }}"
                data-panel-index="{{ loop.index0 }}"
            >
                <span class="match-multiplex__tab-flags" aria-hidden="true">
                    {% include 'components/_country_flag_img.html.twig' with { country: match.paysDomicile } only %}
                    {% include 'components/_country_flag_img.html.twig' with { country: match.paysExterieur } only %}
                </span>
                <span class="match-multiplex__tab-labels">
                    <span class="match-multiplex__tab-fixture">
                        {{ country_short_label(match.paysDomicile) }}
                        <strong class="match-multiplex__tab-score" data-match-tab-score data-match-id="{{ match.id }}">
                            {{ tab_score_home }}-{{ tab_score_away }}
                        </strong>
                        {{ country_short_label(match.paysExterieur) }}
                    </span>
                    <span class="match-multiplex__tab-clock" data-match-tab-clock data-match-id="{{ match.id }}">
                        {% if multiplex_preview|default(false) %}
                            {{ multiplex_preview_kickoff ? multiplex_preview_kickoff|date('H:i') : match.dateHeure|date('H:i') }}
                        {% else %}
                            {{ match_live_clock_label(match) }}
                        {% endif %}
                    </span>
                </span>
            </button>
        {% endfor %}
    </div>

    <div class="match-multiplex__panels">
        {% for match in live_matches %}
            {% set is_favorite_country_match = match_is_team_favorite_highlight(match, team_favorite_highlight) %}
            {% set panel = multiplex_panels_by_match_id[match.id] ?? {} %}
            {% include 'competition/_match_multiplex_panel.html.twig' with {
                match: match,
                pronostic: pronostics_by_match_id[match.id] ?? null,
                partner_pronostics: partner_pronostics_by_match_id[match.id] ?? [],
                now: now,
                match_goals: goals_by_match_id[match.id] ?? [],
                team_match_points: team_match_points_by_match_id[match.id] ?? null,
                match_joker: joker_usage_by_match_id[match.id] ?? null,
                is_favorite_country_match: is_favorite_country_match,
                panel_index: loop.index0,
                multiplex_preview: multiplex_preview|default(false),
                multiplex_preview_kickoff: multiplex_preview_kickoff|default(null),
                multiplex_panel: panel,
                espion_intel: espion_intel_by_match_id[match.id] ?? null,
                show_joker_ui: show_joker_ui|default(false),
                prono_access_blocked: prono_access_blocked|default(false),
            } only %}
        {% endfor %}
    </div>
</div>