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

{% block title %}{{ author.name }} · LivreComment{% endblock %}
{% block app_header %}
    {% include 'components/_detail_header.html.twig' with { back_fallback: path('app_search'), title: 'Recherche' } only %}
{% endblock %}
{% block body %}
    <article>
        <header class="author-hero">
            {% set author_photo_url = author_photo(author) %}
            {# Placeholder à initiales TOUJOURS présent ; la photo (si dispo) est
               posée par-dessus en overlay. onerror="this.remove()" : si la photo
               404 (ex. miniature Wikipedia obsolète, qui renvoie une page HTML),
               on retire l'<img> -> les initiales réapparaissent. Robuste, jamais
               de picto cassé. Le replace -M->-L cible la version L des covers OL ;
               sans effet sur les autres URLs. #}
            <div class="author-hero__photo author-hero__photo--placeholder">
                <span class="author-hero__initials">{{ author.name|first|upper }}</span>
                {% if author_photo_url %}
                    <img src="{{ author_photo_url|replace({'-M.jpg': '-L.jpg'}) }}"
                         alt="Portrait de {{ author.name }}" loading="eager"
                         style="position: absolute; inset: 0; width: 100%; height: 100%;"
                         onerror="this.remove()">
                {% endif %}
            </div>

            <div class="author-hero__body">
                <div class="author-name-bar">
                    <div class="author-name-bar__title">
                        <h1 class="author-name">{{ author.name }}</h1>
                        {% if author.birthYear or author.deathYear %}
                            <p class="author-dates">
                                {% if author.birthYear %}<strong>{{ author.birthYear }}</strong>{% else %}?{% endif %}
                                →
                                {% if author.deathYear %}<strong>{{ author.deathYear }}</strong>{% else %}<span>aujourd'hui</span>{% endif %}
                            </p>
                        {% endif %}
                    </div>

                    {% if top_genres|length > 0 or author.awards|length > 0 %}
                        <div class="author-name-bar__badges">
                            {% if top_genres|length > 0 %}
                                <details class="author-meta-badge" data-controller="dismiss-outside">
                                    <summary aria-label="{{ top_genres|length }} genre{{ top_genres|length > 1 ? 's' : '' }}">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
                                            <line x1="7" y1="7" x2="7.01" y2="7"/>
                                        </svg>
                                        {{ top_genres|length }}
                                    </summary>
                                    <div class="author-meta-badge__popover">
                                        {% for genre in top_genres %}
                                            <span class="author-meta-tag">{{ genre }}</span>
                                        {% endfor %}
                                    </div>
                                </details>
                            {% endif %}
                            {% if author.awards|length > 0 %}
                                <details class="author-meta-badge author-meta-badge--awards" data-controller="dismiss-outside">
                                    <summary aria-label="{{ author.awards|length }} prix">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
                                            <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
                                            <path d="M4 22h16"/>
                                            <path d="M10 14.66V17c0 .55.47.98.97 1.21C12.15 18.75 13 20.24 13 22"/>
                                            <path d="M14 14.66V17c0 .55-.47.98-.97 1.21C11.85 18.75 11 20.24 11 22"/>
                                            <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>
                                        </svg>
                                        {{ author.awards|length }}
                                    </summary>
                                    <div class="author-meta-badge__popover">
                                        {% for award in author.awards %}
                                            <span class="author-meta-tag">{{ award }}</span>
                                        {% endfor %}
                                    </div>
                                </details>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </header>

        {% if author.bio %}
            {% set author_bio_clean = author.bio|strip_markdown %}
            {% if author_bio_clean %}
                <div class="author-bio-section" data-controller="expandable" data-expandable-collapsed-class="is-collapsed">
                    <p class="author-bio is-collapsed" data-expandable-target="content">{{ author_bio_clean }}</p>
                    <button type="button" class="synopsis__toggle" data-action="expandable#toggle" data-expandable-target="toggle" aria-expanded="false">
                        Lire la suite
                    </button>
                </div>
            {% endif %}
        {% endif %}

        <section class="author-section">
            <h2 class="author-section__title">
                Tous ses livres
                {% if author.works|length > 0 %}<span class="author-section__count">{{ author.works|length }}</span>{% endif %}
            </h2>
            {% if author.works|length > 0 %}
                <div class="author-books-grid">
                    {% for work in author.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>
            {% endif %}

            {# Complément : livres de l'auteur via Google Books, chargés en différé
               (eager = dès le rendu de la fiche, pas au scroll) et matérialisés
               au clic. NB : un frame loading="lazy" + display:contents ne se
               déclenche pas (pas de box à observer) → eager + grille propre. #}
            <turbo-frame id="author-more-books"
                         src="{{ path('app_author_books', { publicId: author.publicId }) }}"
                         loading="eager"></turbo-frame>
        </section>

        {# Auteurs similaires — content-based via genres communs #}
        {% if similar_authors|length > 0 %}
            <section class="author-section">
                <h2 class="author-section__title">Aussi appréciés</h2>
                <div class="similar-authors">
                    {% for sa in similar_authors %}
                        <a href="{{ path('app_author_show', { publicId: sa.publicId }) }}" class="similar-author">
                            {% if author_photo(sa) %}
                                <img class="similar-author__avatar" src="{{ author_photo(sa) }}" alt=""
                                     onerror="this.outerHTML='<div class=&quot;similar-author__avatar similar-author__placeholder&quot; aria-hidden=&quot;true&quot;>{{ sa.name|first|upper }}</div>'">
                            {% else %}
                                <div class="similar-author__avatar similar-author__placeholder" aria-hidden="true">{{ sa.name|first|upper }}</div>
                            {% endif %}
                            <span class="similar-author__name">{{ sa.name }}</span>
                        </a>
                    {% endfor %}
                </div>
            </section>
        {% endif %}

        {# Adaptations agrégées — section repliable (disclosure) en bas de fiche #}
        {% if all_adaptations|length > 0 %}
            <section class="author-section author-adaptations">
                <details data-controller="dismiss-outside">
                    <summary class="author-adaptations__summary">
                        <span class="author-adaptations__label">
                            <span class="author-adaptations__icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="23 7 16 12 23 17 23 7"/>
                                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                                </svg>
                            </span>
                            <span>{{ all_adaptations|length }} adaptation{{ all_adaptations|length > 1 ? 's' : '' }} à l'écran</span>
                        </span>
                        <svg class="author-adaptations__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <polyline points="6 9 12 15 18 9"/>
                        </svg>
                    </summary>
                    <ul class="adaptations-list">
                        {% for adapt in all_adaptations|slice(0, 10) %}
                            <li class="adaptation">
                                <span class="adaptation__type">{{ adapt.type ?? 'film' }}</span>
                                <span class="adaptation__title">{{ adapt.title }}</span>
                                {% if adapt.work_title ?? false %}<span class="adaptation__work">d'après {{ adapt.work_title }}</span>{% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </details>
            </section>
        {% endif %}
    </article>
{% endblock %}