{# Une carte du deck Découverte (cover = héros), à partir d'un ProviderBookResult
   (`card`). source/externalId : 'bdd'+workPublicId si matérialisé, sinon
   provider id (résolu/matérialisé au clic d'action). Les boutons d'action sont
   SOUS la pile (cf. _deck.html.twig), pas dans la carte. #}
{% set tparts = book_title_parts(card.title, card.subtitle|default('')) %}
{% set author = card.authors[0]|default('') %}
{% if card.workPublicId %}
    {% set external = { source: 'bdd', id: card.workPublicId } %}
    {% set href = path('app_work_show', { publicId: card.workPublicId }) %}
{% else %}
    {% set external = { source: card.source, id: (card.source == 'openlibrary' ? card.openLibraryId : card.googleBooksId) } %}
    {% set href = path('app_work_lookup', { source: card.source, id: external.id }) %}
{% endif %}
{% set fallback_url = path('covers_resolve', { title: card.title, author: author }) %}

<article class="discovery-card"
         data-discovery-deck-target="card"
         data-source="{{ external.source }}"
         data-external-id="{{ external.id }}">
    <span class="discovery-card__badge" aria-hidden="true"></span>
    <a class="discovery-card__fiche" href="{{ href }}" data-turbo-frame="_top"
       aria-label="Voir la fiche de {{ tparts.main }}">
        Voir la fiche
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"/></svg>
    </a>
    <a class="discovery-card__link" href="{{ href }}" data-turbo-frame="_top"
       aria-label="Ouvrir la fiche de {{ tparts.main }}">
        <img class="discovery-card__img" src="{{ cover_hd(card.coverUrl)|default(fallback_url) }}"
             alt="Couverture de {{ tparts.main }}" loading="lazy" draggable="false"
             data-fallback="{{ fallback_url }}"
             onerror="if(!this.dataset.tried){this.dataset.tried='1';this.src=this.dataset.fallback;}else{this.outerHTML='<div class=&quot;discovery-card__img discovery-card__img--ph&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;46&quot; height=&quot;46&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>';}">
    </a>

    <div class="discovery-card__scrim">
        <h2 class="discovery-card__title">{{ tparts.main }}</h2>
        <p class="discovery-card__meta">
            {%- if author %}{{ author }}{% endif -%}
            {%- if card.averageRating and card.ratingsCount > 0 -%}
                {% if author %} · {% endif %}<span class="discovery-card__star" aria-hidden="true">★</span> {{ card.averageRating|number_format(1) }}
            {%- endif -%}
        </p>
        {% if card.description %}
            <p class="discovery-card__desc">{{ card.description }}</p>
            {% if card.description|length > 170 %}
                <button type="button" class="discovery-card__more" data-action="click->discovery-deck#toggleDesc">Voir plus</button>
            {% endif %}
        {% endif %}
        {% if card.recoHook %}<p class="discovery-card__hook">{{ card.recoHook }}</p>{% endif %}
    </div>

    {# Note + commentaire, révélés par-dessus le voile cyan quand « Déjà lu » est
       sélectionné. Étoiles instantanées ; commentaire actif une fois noté. #}
    <div class="discovery-card__rate">
        <p class="discovery-rate__label">Ta note</p>
        <div class="discovery-stars" role="group" aria-label="Note sur 5">
            {% for i in 1..5 %}
                <button type="button" class="discovery-star" data-score="{{ i }}"
                        data-action="click->discovery-deck#rate"
                        aria-label="{{ i }} étoile{{ i > 1 ? 's' : '' }}">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                </button>
            {% endfor %}
        </div>
        <input type="text" class="discovery-comment"
               data-action="input->discovery-deck#comment"
               placeholder="Un mot sur ce livre ? (optionnel)" maxlength="280" disabled>
    </div>
</article>