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

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

{% block wizard %}
    <form method="post" action="{{ path('app_onboarding_authors') }}" class="wiz__form"
          data-controller="author-picker"
          data-author-picker-search-url-value="{{ path('app_onboarding_authors_search') }}"
          data-author-picker-create-url-value="{{ path('app_onboarding_authors_create') }}"
          data-author-picker-create-token-value="{{ csrf_token('onboarding-author-create') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('onboarding-authors') }}">

        <header class="wiz__head">
            <p class="wiz__eyebrow">Étape {{ step }} / {{ total_steps }}</p>
            <h1 class="wiz__title">Tes auteurs préférés</h1>
            <p class="wiz__lead">Cherche ou coche dans la liste. Tu peux en ajouter autant que tu veux.</p>
        </header>

        <div class="picker">
            <div class="picker__search">
                <svg class="picker__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18" aria-hidden="true">
                    <circle cx="11" cy="11" r="8"/>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                <input type="search"
                       placeholder="Cherche un auteur, ex : Tolkien"
                       autocomplete="off"
                       data-author-picker-target="input"
                       data-action="input->author-picker#search">
                <div class="picker__suggestions" data-author-picker-target="suggestions" hidden></div>
            </div>

            <div class="picker__selected" data-author-picker-target="selected">
                {# Chips d'auteurs déjà sélectionnés (re-render hydraté par JS au connect) #}
                {% for a in selected_authors %}
                    {% set photo = author_photo(a) %}
                    <span class="picker-chip"
                          data-author-id="{{ a.id }}"
                          data-author-name="{{ a.name }}">
                        {% if photo %}
                            <img class="picker-chip__photo" src="{{ photo }}" alt="" loading="lazy"
                                 onerror="this.outerHTML='<span class=&quot;picker-chip__photo picker-chip__photo--placeholder&quot;>{{ a.name|first|upper }}</span>'">
                        {% else %}
                            <span class="picker-chip__photo picker-chip__photo--placeholder">{{ a.name|first|upper }}</span>
                        {% endif %}
                        <span class="picker-chip__name">{{ a.name }}</span>
                        <button type="button" class="picker-chip__remove"
                                data-action="click->author-picker#remove"
                                data-author-id="{{ a.id }}"
                                aria-label="Retirer {{ a.name }}">×</button>
                        <input type="hidden" name="authors[]" value="{{ a.id }}">
                    </span>
                {% endfor %}
            </div>

            <p class="picker__section-title">Auteurs populaires</p>
            <fieldset class="wiz__grid wiz__grid--authors" data-author-picker-target="popular">
                <legend class="sr-only">Auteurs populaires</legend>
                {% set selected_ids = selected_authors|map(a => a.id) %}
                {% for author in authors %}
                    {% set photo = author_photo(author) %}
                    <label class="pick">
                        <input type="checkbox" value="{{ author.id }}"
                               data-author-name="{{ author.name }}"
                               data-author-photo="{{ photo ?: '' }}"
                               data-author-initial="{{ author.name|first|upper }}"
                               data-action="change->author-picker#togglePopular"
                               {% if author.id in selected_ids %}checked{% endif %}>
                        <span class="pick__media pick__media--round">
                            {% if photo %}
                                <img src="{{ photo }}" alt="" loading="lazy"
                                     onerror="this.outerHTML='<span class=&quot;pick__placeholder&quot;>{{ author.name|first|upper }}</span>'">
                            {% else %}
                                <span class="pick__placeholder">{{ author.name|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">{{ author.name }}</span>
                    </label>
                {% endfor %}
            </fieldset>
        </div>

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