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

{% block body_class %}page-onboarding{% endblock %}

{% block app_header %}{# Pas de header global pendant l'onboarding — on a notre propre top bar #}{% endblock %}

{% block body %}
    <div class="wiz">
        <div class="wiz__topbar">
            <a class="wiz__brand" href="{{ path('app_onboarding_genres') }}" aria-label="LivreComment">
                {{ include('components/_logo_mark.html.twig', { size: 40 }) }}
            </a>
            <div class="wiz__progress" role="progressbar" aria-valuemin="1" aria-valuemax="{{ total_steps }}" aria-valuenow="{{ step }}">
                <span class="wiz__progress-bar" style="--p: {{ (step / total_steps * 100)|round }}%;"></span>
            </div>
            <form method="post" action="{{ path('app_onboarding_skip') }}" class="wiz__skip-form">
                <input type="hidden" name="_token" value="{{ csrf_token('onboarding-skip') }}">
                <button type="submit" class="wiz__skip" onclick="return confirm('Tout passer ?');">Passer</button>
            </form>
        </div>

        {% block wizard %}{% endblock %}
    </div>
{% endblock %}