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

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

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

        <header class="wiz__head">
            <p class="wiz__eyebrow">Étape {{ step }} / {{ total_steps }}</p>
            <h1 class="wiz__title">Quels genres te parlent ?</h1>
            <p class="wiz__lead">Choisis ce qui t'attire. Tu pourras affiner plus tard.</p>
        </header>

        <fieldset class="wiz__genres">
            <legend class="sr-only">Tes genres préférés</legend>
            <div class="genres-grid">
                {% for item in items|slice(0, 6) %}
                    {% set hue = (item.genre.slug|length * 37) % 360 %}
                    <label class="genre-tile" style="--g-hue: {{ hue }};">
                        <input type="checkbox" name="genres[]" value="{{ item.genre.id }}"
                               {% if item.genre.id in selected_ids %}checked{% endif %}>
                        {% if item.cover_work and work_cover_thumb(item.cover_work) %}
                            <img class="genre-tile__cover" src="{{ work_cover_thumb(item.cover_work) }}" alt="" loading="lazy"
                                 onerror="this.outerHTML='<span class=&quot;genre-tile__art&quot; aria-hidden=&quot;true&quot;></span>'">
                        {% else %}
                            <span class="genre-tile__art" aria-hidden="true"></span>
                        {% endif %}
                        <span class="genre-tile__shade" aria-hidden="true"></span>
                        <span class="genre-tile__name">{{ item.label }}</span>
                        <span class="genre-tile__check" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><polyline points="20 6 9 17 4 12"/></svg>
                        </span>
                    </label>
                {% endfor %}
            </div>

            {% if items|length > 6 %}
                <input type="checkbox" id="show-more-genres" class="genres-more-toggle sr-only">
                <div class="genres-grid genres-more">
                    {% for item in items|slice(6) %}
                        {% set hue = (item.genre.slug|length * 37) % 360 %}
                        <label class="genre-tile" style="--g-hue: {{ hue }};">
                            <input type="checkbox" name="genres[]" value="{{ item.genre.id }}"
                                   {% if item.genre.id in selected_ids %}checked{% endif %}>
                            {% if item.cover_work and work_cover_thumb(item.cover_work) %}
                                <img class="genre-tile__cover" src="{{ work_cover_thumb(item.cover_work) }}" alt="" loading="lazy"
                                     onerror="this.outerHTML='<span class=&quot;genre-tile__art&quot; aria-hidden=&quot;true&quot;></span>'">
                            {% else %}
                                <span class="genre-tile__art" aria-hidden="true"></span>
                            {% endif %}
                            <span class="genre-tile__shade" aria-hidden="true"></span>
                            <span class="genre-tile__name">{{ item.label }}</span>
                            <span class="genre-tile__check" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><polyline points="20 6 9 17 4 12"/></svg>
                            </span>
                        </label>
                    {% endfor %}
                </div>
                <label for="show-more-genres" class="genres-more-btn">
                    <span class="genres-more-btn__open">Voir plus de genres</span>
                    <span class="genres-more-btn__close">Replier</span>
                </label>
            {% endif %}
        </fieldset>

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