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

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

{% block wizard %}
    <form method="post" action="{{ path('app_onboarding_books') }}" class="wiz__form"
          data-controller="book-picker"
          data-book-picker-search-url-value="{{ path('app_onboarding_books_search') }}"
          data-book-picker-materialize-url-value="{{ path('app_onboarding_books_materialize') }}"
          data-book-picker-csrf-value="{{ csrf_token('onboarding-book-materialize') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('onboarding-books') }}">

        <header class="wiz__head">
            <p class="wiz__eyebrow">Étape {{ step }} / {{ total_steps }}</p>
            <h1 class="wiz__title">Des livres que tu as adorés</h1>
            <p class="wiz__lead">Cherche ou coche dans la liste. On les ajoute à ton profil avec une note 5 étoiles.</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 livre que tu as aimé"
                       autocomplete="off"
                       data-book-picker-target="input"
                       data-action="input->book-picker#search">
                <div class="picker__suggestions" data-book-picker-target="suggestions" hidden></div>
            </div>

            <div class="picker__selected" data-book-picker-target="selected"></div>

            <p class="picker__section-title">Livres populaires</p>
            <fieldset class="wiz__grid wiz__grid--books" data-book-picker-target="popular">
                <legend class="sr-only">Livres populaires</legend>
                {% for work in works %}
                    {% set first_author = work.authors.first %}
                    {% set cover = work_cover_thumb(work) %}
                    <label class="pick pick--book">
                        <input type="checkbox" value="{{ work.id }}"
                               data-work-title="{{ work.title }}"
                               data-work-author="{{ first_author ? first_author.name : '' }}"
                               data-work-cover="{{ cover ?: '' }}"
                               data-work-initial="{{ work.title|first|upper }}"
                               data-action="change->book-picker#togglePopular">
                        <span class="pick__media pick__media--cover">
                            {% if cover %}
                                <img src="{{ cover }}" alt="" loading="lazy" width="167" height="250"
                                     onerror="this.outerHTML='<span class=&quot;pick__placeholder&quot;>{{ work.title|first|upper }}</span>'">
                            {% else %}
                                <span class="pick__placeholder">{{ work.title|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">{{ work.title }}</span>
                    </label>
                {% endfor %}
            </fieldset>
        </div>

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