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

{% block title %}{{ work.title }} · édition {{ edition.publishedYear ?: '?' }} · LivreComment{% endblock %}

{% block app_header %}
    {% include 'components/_detail_header.html.twig' with { back_fallback: path('app_work_show', { publicId: work.publicId }), title: 'Livre' } only %}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .edition-show { max-width: 60ch; margin: 0 auto; padding: var(--space-5) 0; }
        .edition-show__title { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
        .edition-show__subtitle { font-size: 1rem; color: var(--muted); margin-top: 6px; }
        .edition-show__meta { color: var(--muted); margin-top: var(--space-3); font-size: 0.95rem; }
        .edition-show__cover-wrap { margin: var(--space-4) 0; }
        .edition-show__cover {
            max-width: 200px;
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow-lg);
        }
        .edition-specs {
            margin: var(--space-5) 0;
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            background: var(--bg-paper);
        }
        .edition-specs dl {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 8px var(--space-3);
            margin: 0;
        }
        .edition-specs dt { color: var(--muted); font-size: 0.9rem; }
        .edition-specs dd { color: var(--ink); margin: 0; font-size: 0.95rem; }
    </style>
{% endblock %}

{% block body %}
    <article class="edition-show">
        <h1 class="edition-show__title">
            {{ work.title }}{% if edition.subtitle %} <span class="edition-show__subtitle">{{ edition.subtitle }}</span>{% endif %}
        </h1>
        <p class="edition-show__meta">
            Édition {{ edition.publishedYear ?: '?' }}{% if edition.publisher %} · {{ edition.publisher }}{% endif %}
        </p>

        {% if edition.coverUrl %}
            <div class="edition-show__cover-wrap">
                <img class="edition-show__cover" src="{{ edition.coverUrl }}" alt="Couverture de l'édition" loading="eager">
            </div>
        {% endif %}

        <div class="edition-specs">
            <dl>
                {% if edition.isbn13 %}<dt>ISBN-13</dt><dd>{{ edition.isbn13 }}</dd>{% endif %}
                {% if edition.isbn10 %}<dt>ISBN-10</dt><dd>{{ edition.isbn10 }}</dd>{% endif %}
                {% if edition.language %}<dt>Langue</dt><dd>{{ edition.language|upper }}</dd>{% endif %}
                {% if edition.pageCount %}<dt>Pages</dt><dd>{{ edition.pageCount }}</dd>{% endif %}
                {% if edition.publisher %}<dt>Éditeur</dt><dd>{{ edition.publisher }}</dd>{% endif %}
                {% if edition.publishedYear %}<dt>Année</dt><dd>{{ edition.publishedYear }}</dd>{% endif %}
            </dl>
        </div>

        <p style="color: var(--muted); font-size: 0.9rem;">
            Pour noter ou critiquer cette œuvre, retourne à la <a href="{{ path('app_work_show', { publicId: work.publicId }) }}">fiche principale</a>.
        </p>
    </article>
{% endblock %}