{% extends 'onboarding/_wizard_base.html.twig' %}

{% block title %}Tes lecteurs · LivreComment{% endblock %}

{% block wizard %}
    <form method="post" action="{{ path('app_onboarding_readers') }}" class="wiz__form">
        <input type="hidden" name="_token" value="{{ csrf_token('onboarding-readers') }}">

        <header class="wiz__head">
            <p class="wiz__eyebrow">Étape {{ step }} / {{ total_steps }}</p>
            <h1 class="wiz__title">Tes premiers lecteurs</h1>
            <p class="wiz__lead">Suis ceux qui t'intéressent. Tu verras leurs critiques sur ton accueil.</p>
        </header>

        {% if suggested|length > 0 %}
            <fieldset class="wiz__grid wiz__grid--readers">
                <legend class="sr-only">Lecteurs à suivre</legend>
                {% for u in suggested %}
                    <label class="pick pick--reader">
                        <input type="checkbox" name="readers[]" value="{{ u.id }}">
                        <span class="pick__media pick__media--round">
                            {% if user_avatar(u) %}
                                <img src="{{ user_avatar(u) }}" alt="" loading="lazy">
                            {% else %}
                                <span class="pick__placeholder">{{ (u.displayName ?: u.username)|first|upper }}</span>
                            {% endif %}
                            <span class="pick__check" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="16" height="16"><polyline points="20 6 9 17 4 12"/></svg>
                            </span>
                        </span>
                        <span class="pick__name">{{ u.displayName ?: u.username }}</span>
                        <span class="pick__handle">@{{ u.username }}</span>
                    </label>
                {% endfor %}
            </fieldset>
        {% else %}
            <p class="wiz__empty">Pas encore de suggestions disponibles. Tu pourras en chercher depuis l'app.</p>
        {% endif %}

        <footer class="wiz__cta">
            <button type="submit" class="btn wiz__next">Terminer</button>
        </footer>
    </form>
{% endblock %}