{% extends 'base.html.twig' %}
{% form_theme form 'form/tailadmin_theme.html.twig' %}

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/birthday.css') }}?v=7">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% if result and result.popup_spam|default(false) %}
        <script src="{{ asset('js/birthday-cheater-popups.js') }}?v=1" defer data-turbo-track="reload"></script>
    {% endif %}
    {% if result and result.variant == 'birthday' %}
        <script src="{{ asset('js/birthday-celebration.js') }}?v=1" defer data-turbo-track="reload"></script>
    {% endif %}
{% endblock %}

{% block body %}
    {% if result and result.variant == 'birthday' %}
        <div class="birthday-confetti-layer" data-birthday-confetti aria-hidden="true"></div>
    {% endif %}

    <section class="ta-card birthday-page__card{% if result and result.popup_spam|default(false) %} birthday-page__card--cheater-spam{% elseif result and result.variant == 'birthday' %} birthday-page__card--celebration{% endif %}">
        {% if result and result.variant == 'birthday' %}
            <div
                id="birthday-page-result"
                class="birthday-celebration"
                role="status"
                tabindex="-1"
            >
                <div class="birthday-celebration__decor" aria-hidden="true">
                    <span class="birthday-celebration__balloon birthday-celebration__balloon--1">🎈</span>
                    <span class="birthday-celebration__balloon birthday-celebration__balloon--2">🎈</span>
                    <span class="birthday-celebration__balloon birthday-celebration__balloon--3">🎈</span>
                    <span class="birthday-celebration__spark">✨</span>
                    <span class="birthday-celebration__spark birthday-celebration__spark--2">🎉</span>
                    <span class="birthday-celebration__spark birthday-celebration__spark--3">🎂</span>
                </div>

                <div class="birthday-celebration__bunting" aria-hidden="true">
                    <span></span><span></span><span></span><span></span><span></span>
                    <span></span><span></span><span></span><span></span><span></span>
                </div>

                {% if result.message %}
                    <p class="birthday-celebration__message">{{ result.message }}</p>
                {% endif %}

                {% if result.gif %}
                    <div class="birthday-celebration__gif-frame">
                        <img
                            src="{{ asset(result.gif) }}"
                            alt="Animation anniversaire"
                            class="birthday-celebration__gif"
                            loading="eager"
                            decoding="async"
                        >
                    </div>
                {% endif %}
            </div>
        {% elseif result and result.popup_spam|default(false) %}
            <p class="birthday-page__cheater-hint ta-card-text" role="status">
                Accès refusé. Fermez les fenêtres si vous pouvez…
            </p>
            <div class="birthday-cheater-popups-layer" data-birthday-cheater-popups hidden></div>
        {% else %}
            <div class="birthday-page__intro">
                <h1 class="birthday-page__title">Bon anniv' !</h1>
                <p class="birthday-page__lead ta-card-text">
                    Pour fêter l'occasion, LotoPotoFoot t'offre <strong>200 pts</strong>, c'est toujours ça de pris.
                </p>
                <p class="birthday-page__lead ta-card-text">
                    Renseigne le code et les points seront appliqués directement sur ton classement.
                </p>
            </div>

            <div class="birthday-page__form-wrap">
                {{ form_start(form, { attr: { class: 'birthday-page__form', 'data-turbo': 'false' } }) }}
                    {{ form_errors(form) }}
                    {{ form_row(form.promoCode) }}
                    <button type="submit" class="btn btn-primary birthday-page__submit">
                        Valider le code
                        <i class="ti ti-gift" aria-hidden="true"></i>
                    </button>
                {{ form_end(form) }}
            </div>

            <div class="birthday-page__party-gif-wrap" aria-hidden="true">
                <img
                    src="{{ asset('images/birthday/party-celebration.gif') }}"
                    alt=""
                    class="birthday-page__party-gif"
                    loading="lazy"
                    decoding="async"
                >
            </div>
        {% endif %}
    </section>

    {% if result and result.variant == 'birthday' %}
        <script>
            document.getElementById('birthday-page-result')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        </script>
    {% endif %}
{% endblock %}