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

{% block body_class %} front-body--recap-stories front-body--finale-stories{% endblock %}

{% block title %}Finale LPF’26 — Le grand débrief | LPF 2026{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/team-recap-stories.css') }}?v=5">
    <link rel="stylesheet" href="{{ asset('css/competition-finale.css') }}?v=3">
{% endblock %}

{% block body %}
    <div
        class="recap-stories finale-stories"
        data-recap-stories
        data-autoplay-ms="6500"
        role="region"
        aria-roledescription="carrousel"
        aria-label="Finale LPF’26 — débrief chambreur"
    >
        <div class="recap-stories__frame">
            <div class="recap-stories__progress" data-recap-progress aria-hidden="true"></div>

            <header class="recap-stories__top">
                <a href="{{ path('app_ranking') }}" class="recap-stories__close" aria-label="Fermer la finale">
                    <i class="ti ti-x" aria-hidden="true"></i>
                </a>
                <p class="recap-stories__brand">LPF’26 · Finale</p>
            </header>

            <div class="recap-stories__viewport" data-recap-viewport>
                {% for item in story_items %}
                    {% if item.type == 'slide' %}
                        <article
                            class="recap-slide finale-story-slide finale-story-slide--{{ item.context }}{% if loop.first %} is-active{% endif %}{% if item.image %} finale-story-slide--has-photo{% endif %}"
                            data-recap-slide
                            {% if not loop.first %}hidden{% endif %}
                        >
                            <div class="recap-slide__bg" aria-hidden="true"></div>
                            {% if item.image %}
                                <div class="finale-story-slide__photo">
                                    <img
                                        src="{{ item.image starts with 'http' ? item.image : asset(item.image) }}"
                                        alt=""
                                        loading="{{ loop.first ? 'eager' : 'lazy' }}"
                                    >
                                </div>
                            {% elseif item.team_logo %}
                                {% set logo_src = item.team_logo starts with 'http' ? item.team_logo : asset(item.team_logo) %}
                                <img class="recap-slide__logo recap-slide__logo--sm" src="{{ logo_src }}" alt="" loading="lazy">
                            {% endif %}

                            {% if item.eyebrow %}
                                <p class="recap-slide__eyebrow">{{ item.eyebrow }}</p>
                            {% endif %}
                            <h2 class="recap-slide__title{% if item.title|length > 42 %} recap-slide__title--compact{% endif %}">
                                {% if item.team_id %}
                                    <a class="finale-story-slide__title-link" href="{{ path('app_team_recap', { id: item.team_id }) }}">{{ item.title }}</a>
                                {% else %}
                                    {{ item.title }}
                                {% endif %}
                            </h2>
                            {% if item.value %}
                                <p class="recap-slide__mega recap-slide__mega--text finale-story-slide__value">{{ item.value }}</p>
                            {% endif %}
                            {% if item.body %}
                                <p class="recap-slide__punch finale-story-slide__body">{{ item.body|raw }}</p>
                            {% endif %}
                            {% if loop.first %}
                                <p class="recap-slide__hint">Tape ou swipe pour continuer</p>
                            {% endif %}
                        </article>
                    {% elseif item.type == 'roll_call' %}
                        {% set meta = item.meta %}
                        <article
                            class="recap-slide finale-story-slide finale-story-slide--roll_call{% if loop.first %} is-active{% endif %}"
                            data-recap-slide
                            {% if not loop.first %}hidden{% endif %}
                        >
                            <div class="recap-slide__bg" aria-hidden="true"></div>
                            {% if meta.image %}
                                <div class="finale-story-slide__photo finale-story-slide__photo--sm">
                                    <img
                                        src="{{ meta.image starts with 'http' ? meta.image : asset(meta.image) }}"
                                        alt=""
                                        loading="lazy"
                                    >
                                </div>
                            {% endif %}
                            {% if meta.eyebrow %}
                                <p class="recap-slide__eyebrow">{{ meta.eyebrow }}</p>
                            {% endif %}
                            <h2 class="recap-slide__title recap-slide__title--compact">{{ meta.title }}</h2>
                            <div class="finale-story-roll" tabindex="0">
                                {% for row in item.rows %}
                                    <div class="finale-story-roll__row">
                                        <span class="finale-story-roll__pos">#{{ row.position }}</span>
                                        {% if row.team_logo %}
                                            {% set roll_logo = row.team_logo starts with 'http' ? row.team_logo : asset(row.team_logo) %}
                                            <img class="finale-story-roll__logo" src="{{ roll_logo }}" alt="" loading="lazy">
                                        {% endif %}
                                        <div class="finale-story-roll__text">
                                            <a href="{{ path('app_team_recap', { id: row.team_id }) }}">{{ row.team_name }}</a>
                                            <span>{{ row.line|raw }}</span>
                                        </div>
                                        <span class="finale-story-roll__pts">{{ row.points|number_format(0, ',', ' ') }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        </article>
                    {% elseif item.type == 'actions' %}
                        <article
                            class="recap-slide finale-story-slide finale-story-slide--actions{% if loop.first %} is-active{% endif %}"
                            data-recap-slide
                            {% if not loop.first %}hidden{% endif %}
                        >
                            <div class="recap-slide__bg" aria-hidden="true"></div>
                            <p class="recap-slide__eyebrow">Suite</p>
                            <h2 class="recap-slide__title">À toi de jouer</h2>
                            <p class="recap-slide__sub">Relance ton récap Stories ou retourne au classement.</p>
                            <div class="recap-slide__actions">
                                {% set my_team_id = connected_team_id() %}
                                {% if my_team_id %}
                                    <a href="{{ path('app_team_recap', { id: my_team_id }) }}" class="btn btn-primary">Mon récap Stories</a>
                                {% endif %}
                                <a href="{{ path('app_ranking') }}" class="btn btn-outline recap-slide__btn-ghost">Classement</a>
                                <a href="{{ path('app_stats') }}" class="btn btn-outline recap-slide__btn-ghost">Stats</a>
                            </div>
                        </article>
                    {% endif %}
                {% endfor %}
            </div>

            <button type="button" class="recap-stories__hit recap-stories__hit--prev" data-recap-prev aria-label="Slide précédente"></button>
            <button type="button" class="recap-stories__hit recap-stories__hit--next" data-recap-next aria-label="Slide suivante"></button>
        </div>
    </div>
{% endblock %}

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