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

{% block title %}{{ list.name }} · LivreComment{% endblock %}

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

{% block app_header %}
    {% include 'components/_detail_header.html.twig' with { back_fallback: path('app_lists_index'), title: 'Listes' } only %}
{% endblock %}

{% block body %}
    {% for label, messages in app.flashes(['error']) %}
        <ul class="flash-list">
            {% for message in messages %}
                <li class="flash flash--{{ label }}">{{ message }}</li>
            {% endfor %}
        </ul>
    {% endfor %}

    <header class="list-show__header">
        <div class="list-show__title-block">
            <h1 class="list-show__title">{{ list.name }}</h1>
            {% if not is_owner %}
                <p class="list-show__owner">
                    par <a href="{{ path('app_profile_show', { handle: list.owner.username }) }}">{{ list.owner.displayName ?: list.owner.username }}</a>
                </p>
            {% endif %}
            {% set list_desc = list.description ?: (list.type.isBuiltin() ? list.type.defaultDescription : '') %}
            {% if list_desc %}
                <p class="list-show__description">{{ list_desc }}</p>
            {% endif %}

            {% if is_owner %}
                {% if list.likesCount > 0 %}
                    <p class="list-likes-static" aria-label="{{ list.likesCount }} j'aime">
                        <svg viewBox="0 0 24 24" fill="currentColor" width="14" height="14" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                        {{ list.likesCount }}
                    </p>
                {% endif %}
            {% else %}
                <form method="post" action="{{ path('app_lists_toggle_like', { publicId: list.publicId }) }}" class="like-form list-like-form">
                    <input type="hidden" name="_token" value="{{ csrf_token('list-like-' ~ list.publicId) }}">
                    <button type="submit" class="like-btn{{ is_liked ? ' like-btn--liked' : '' }}" aria-pressed="{{ is_liked ? 'true' : 'false' }}" aria-label="{{ is_liked ? 'Ne plus aimer cette liste' : 'Aimer cette liste' }}">
                        <svg class="like-btn__icon" viewBox="0 0 24 24" fill="{{ is_liked ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="18" height="18" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                        <span class="like-btn__count">{{ list.likesCount }}</span>
                    </button>
                </form>
            {% endif %}
        </div>

        {% if is_owner %}
            <details class="list-menu" data-controller="dismiss-outside">
                <summary class="list-menu__trigger" aria-label="Gérer la liste">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                        <line x1="4" y1="7" x2="20" y2="7"/>
                        <line x1="4" y1="12" x2="20" y2="12"/>
                        <line x1="4" y1="17" x2="20" y2="17"/>
                    </svg>
                </summary>
                <div class="list-menu__dropdown">
                    <a href="{{ path('app_lists_show', { publicId: list.publicId, panel: 'add' }) }}" data-turbo-frame="list-manage" class="list-menu__option" onclick="this.closest('details').open=false">Ajouter des livres</a>
                    {% if list.items|length > 0 %}
                        <a href="{{ path('app_lists_show', { publicId: list.publicId, organize: 1 }) }}" data-turbo-frame="list-manage" class="list-menu__option" onclick="this.closest('details').open=false">Organiser</a>
                    {% endif %}
                    <a href="{{ path('app_lists_edit', { publicId: list.publicId }) }}" class="list-menu__option">Modifier</a>
                    {% if not list.type.isBuiltin() %}
                        <form method="post" action="{{ path('app_lists_delete', { publicId: list.publicId }) }}" onsubmit="return confirm('Supprimer cette liste ? Cette action est irréversible.');">
                            <input type="hidden" name="_token" value="{{ csrf_token('list-delete') }}">
                            <button type="submit" class="list-menu__option list-menu__option--danger">Supprimer</button>
                        </form>
                    {% endif %}
                </div>
            </details>
        {% endif %}
    </header>

    {# Zone de gestion re-rendue dans le frame : panneau d'ajout (recherche
       inline) + mode organiser (× de retrait) + grille. Les liens/forms du burger
       et du panneau ciblent ce frame -> mise à jour sans recharger la page. #}
    <turbo-frame id="list-manage" class="list-manage">
        {% if organize and list.items|length > 0 %}
            <div class="list-manage__bar">
                <span class="list-manage__hint">Touche le × d'un livre pour le retirer</span>
                <a href="{{ path('app_lists_show', { publicId: list.publicId }) }}" data-turbo-frame="list-manage" class="btn btn--compact">Terminé</a>
            </div>
        {% endif %}

        {% if panel_add %}
            <div class="list-add">
                <div class="list-add__head">
                    <span class="list-add__title">Ajouter des livres</span>
                    <a href="{{ path('app_lists_show', { publicId: list.publicId }) }}" data-turbo-frame="list-manage" class="list-add__close">Fermer</a>
                </div>
                <form method="get" action="{{ path('app_lists_show', { publicId: list.publicId }) }}" class="list-add__search" role="search">
                    <input type="hidden" name="panel" value="add">
                    <label for="list-add-q" class="sr-only">Chercher un livre à ajouter</label>
                    <input type="search" id="list-add-q" name="q" value="{{ query }}" placeholder="Titre ou auteur…" autocomplete="off" inputmode="search">
                    <button type="submit">Chercher</button>
                </form>

                {% if query %}
                    {% if hits|length > 0 %}
                        <ul class="list-add__results">
                            {% for hit in hits %}
                                {% set ext_id = hit.source == 'openlibrary' ? hit.openLibraryId : hit.googleBooksId %}
                                {% set in_list = hit.workPublicId and hit.workPublicId in list_work_ids %}
                                <li class="list-add__result">
                                    {% if hit.coverUrl %}
                                        <img class="list-add__cover" src="{{ hit.coverUrl }}" alt="" loading="lazy">
                                    {% else %}
                                        <span class="list-add__cover list-add__cover--ph" aria-hidden="true">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                                        </span>
                                    {% endif %}
                                    <span class="list-add__info">
                                        <span class="list-add__name">{{ hit.title }}</span>
                                        <span class="list-add__meta">{{ hit.authors|length ? hit.authors|join(', ') : 'Auteur inconnu' }}{% if hit.publishedYear %} · {{ hit.publishedYear }}{% endif %}</span>
                                    </span>
                                    <form method="post" action="{{ path('app_lists_item_toggle', { publicId: list.publicId }) }}" data-turbo-frame="list-manage">
                                        <input type="hidden" name="_token" value="{{ csrf_token('list-item') }}">
                                        <input type="hidden" name="source" value="{{ hit.source }}">
                                        <input type="hidden" name="externalId" value="{{ ext_id }}">
                                        <input type="hidden" name="q" value="{{ query }}">
                                        <button type="submit" class="list-add__btn{{ in_list ? ' is-added' : '' }}">{{ in_list ? '✓ Ajouté' : '+ Ajouter' }}</button>
                                    </form>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="list-add__empty">Aucun livre trouvé pour « {{ query }} ».</p>
                    {% endif %}
                {% endif %}
            </div>
        {% endif %}

        {% if list.items|length > 1 %}
            <form method="get" action="{{ path('app_lists_show', { publicId: list.publicId }) }}" style="margin: 0 0 var(--space-3); text-align: right;">
                <label for="list-sort" class="sr-only">Trier</label>
                <select id="list-sort" name="sort" onchange="this.form.submit()" style="width: auto; display: inline-block;">
                    <option value="recent" {{ sort == 'recent' ? 'selected' : '' }}>Plus récents</option>
                    <option value="rating" {{ sort == 'rating' ? 'selected' : '' }}>Mieux notés</option>
                    <option value="title" {{ sort == 'title' ? 'selected' : '' }}>Titre (A-Z)</option>
                </select>
            </form>
        {% endif %}

        {% if list.items|length > 0 %}
            <div class="list-grid">
                {% for item in items %}
                    {% set work = item.work %}
                    <div class="list-grid-item">
                        <a href="{{ path('app_work_show', { publicId: work.publicId }) }}" class="list-grid-item__link" data-turbo-frame="_top" aria-label="{{ work.title }}">
                            {% if work_cover_thumb(work) %}
                                <img class="list-grid-item__cover" src="{{ work_cover_thumb(work) }}" alt="{{ work.title }}" loading="lazy" width="167" height="250"
                                     onerror="this.outerHTML='<span class=&quot;list-grid-item__cover list-grid-item__cover--placeholder&quot; aria-hidden=&quot;true&quot;><svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.25&quot; width=&quot;24&quot; height=&quot;24&quot;><path d=&quot;M4 19.5A2.5 2.5 0 0 1 6.5 17H20&quot;/><path d=&quot;M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z&quot;/></svg></span>'">
                            {% else %}
                                <span class="list-grid-item__cover list-grid-item__cover--placeholder" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" width="24" height="24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                                </span>
                            {% endif %}
                        </a>
                        {% if organize %}
                            <form method="post" action="{{ path('app_lists_item_remove', { publicId: list.publicId }) }}" class="list-grid-item__remove" data-turbo-frame="list-manage">
                                <input type="hidden" name="_token" value="{{ csrf_token('list-item') }}">
                                <input type="hidden" name="work" value="{{ work.publicId }}">
                                <button type="submit" aria-label="Retirer {{ work.title }}">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
                                </button>
                            </form>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="list-empty">
                {% if is_owner %}
                    <p>Cette liste est vide.</p>
                    <p class="list-empty__sub">Ajoute des livres avec le menu ☰ en haut à droite.</p>
                {% else %}
                    <p>Cette liste est vide pour l'instant.</p>
                {% endif %}
            </div>
        {% endif %}
    </turbo-frame>
{% endblock %}