{# ABOUTME: Collection detail partial — rendered for both full page and htmx. #}
<header class="collection-header">
    <h1>{{ collection.name }}</h1>
    {% if collection.description %}
    <p class="description">{{ collection.description }}</p>
    {% endif %}
    {% if collection.query %}
    <p class="collection-query">
        <span class="query-label">Rule:</span> <code>{{ collection.query }}</code>
    </p>
    {% endif %}
    <p class="collection-actions">
        <a href="{{ url_for('web.collection_edit_form', collection_id=collection.id) }}"
           hx-get="{{ url_for('web.collection_edit_form', collection_id=collection.id) }}"
           hx-target="#collection-content"
           class="btn-secondary">Edit</a>
        <a href="{{ url_for('web.collection_delete_confirm', collection_id=collection.id) }}"
           hx-get="{{ url_for('web.collection_delete_confirm', collection_id=collection.id) }}"
           hx-target="#collection-content"
           class="btn-destructive">Delete</a>
    </p>
</header>

{% if books %}
<section class="books-in-collection" aria-labelledby="books-heading">
    <h2 id="books-heading">
        {% if collection.query %}Matches: {% endif %}{{ books|length }} book{% if books|length != 1 %}s{% endif %}
    </h2>
    <ul class="book-list">
        {% for book in books %}
        <li>
            <a href="{{ url_for('web.book_detail', book_id=book.id) }}">
                {{ book.metadata.title }}
            </a>
            {% if book.metadata.authors %}
            <span class="authors">by {{ book.metadata.authors|join(", ") }}</span>
            {% endif %}
            {# Manual removal only applies to static collections; rule-based membership is derived. #}
            {% if not collection.query %}
            <form method="POST" action="{{ url_for('web.collection_remove_book', collection_id=collection.id, book_id=book.id) }}" class="inline-form">
                <button type="submit" class="btn-small">Remove</button>
            </form>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</section>
{% else %}
<p class="empty">
    {% if collection.query %}No books match this rule yet.{% else %}No books in this collection yet.{% endif %}
</p>
{% endif %}