{# Page "tout voir" générique d'une section home (grille de couvertures).
   Args : page_title, page_sub (optionnel), works (list<Work>). #}
{% extends 'base.html.twig' %}

{% block title %}{{ page_title }} · LivreComment{% endblock %}

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

{% block body %}
    <header class="profile-subpage-header">
        <a href="{{ path('app_home') }}" class="search-crumb">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
            Accueil
        </a>
        <h1 class="search-page-title">{{ page_title }}</h1>
        {% if page_sub is defined and page_sub %}
            <p class="search-page-sub">{{ page_sub }}</p>
        {% endif %}
    </header>

    {% if works|length > 0 %}
        <div class="author-books-grid">
            {% for work in works %}
                <a href="{{ path('app_work_show', { publicId: work.publicId }) }}" class="author-book-item">
                    {% if work_cover_thumb(work) %}
                        <img class="author-book-item__cover" src="{{ work_cover_thumb(work) }}" alt="Couverture de {{ work.title }}" loading="lazy" width="167" height="250"
                             onerror="this.outerHTML='<div class=&quot;author-book-item__cover author-book-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></div>'">
                    {% else %}
                        <div class="author-book-item__cover author-book-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>
                        </div>
                    {% endif %}
                    <p class="author-book-item__title">{{ work.title }}</p>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="home-empty">
            <p class="home-empty__title">Rien à afficher pour l'instant</p>
            <p class="home-empty__hint">Reviens plus tard, ça se remplit au fil des lectures.</p>
        </div>
    {% endif %}
{% endblock %}