{# ABOUTME: Plan-01 paginated list partial — chip strip, count label, sortable table, pager. #}
{# Rendered standalone for htmx swaps into #book-list. #}

{% include "_status_filter.html" %}
{% include "_filter_chips.html" %}

{% if page.total > 0 %}
    <p class="result-count">Showing {{ page.start }}&ndash;{{ page.end }} of {{ page.total }}</p>

    {# Sortable header link macro. Clicking the active column flips direction;
       clicking an inactive column starts at ``asc``. Page resets to 1 on any
       sort change — the user has new ordering, the old page index is stale.
       Active filters ride along so the user's filter set survives a re-sort. #}
    {% macro sort_link(label, key) -%}
        {%- set is_active = (query.sort == key) -%}
        {%- set next_dir = 'desc' if (is_active and query.dir == 'asc') else 'asc' -%}
        <a class="sort-link{% if is_active %} sort-active{% endif %}"
           href="{{ url_for('web.books', q=query.q or none, sort=key, dir=next_dir, **query.filters) }}"
           aria-sort="{{ 'descending' if (is_active and query.dir == 'desc') else ('ascending' if is_active else 'none') }}">
            {{ label }}{% if is_active %} <span class="sort-chevron" aria-hidden="true">{% if query.dir == 'desc' %}&#9660;{% else %}&#9650;{% endif %}</span>{% endif %}
        </a>
    {%- endmacro %}

    {# P3 (#183) — bulk-mark form lives outside the table so the checkbox
       inputs inside each row can target it via the ``form="…"`` attribute,
       keeping the table markup flat and the action bar reusable across the
       desktop table and the mobile card list. #}
    <form id="bulk-status-form"
          class="bulk-status-form"
          hx-post="{{ url_for('web.bulk_update_status', q=query.q or none, sort=query.sort, dir=query.dir, **query.filters) }}"
          hx-target="#book-list"
          hx-swap="innerHTML"
          hx-include="[name='ids']:checked">
        <div class="bulk-status-actions" role="group" aria-label="Bulk mark selected books">
            <button type="submit" name="status" value="reading">Mark Reading</button>
            <button type="submit" name="status" value="finished">Mark Finished</button>
            <button type="submit" name="status" value="unread">Mark Unread</button>
        </div>
    </form>

    <table class="book-table">
        <thead>
            <tr>
                <th class="book-row-select">
                    <input type="checkbox"
                           class="select-all"
                           aria-label="Select all books on this page">
                </th>
                <th class="book-row-cover" aria-label="Cover"></th>
                <th>{{ sort_link('Title', 'title') }}</th>
                <th>{{ sort_link('Author', 'author') }}</th>
                {% if 'series' in visible_columns %}<th class="col-series">{{ sort_link('Series', 'series') }}</th>{% endif %}
                {% if 'isbn' in visible_columns %}<th class="col-isbn">ISBN</th>{% endif %}
                {% if 'language' in visible_columns %}<th class="col-language">Language</th>{% endif %}
                {% if 'publisher' in visible_columns %}<th class="col-publisher">Publisher</th>{% endif %}
                {% if 'added' in visible_columns %}<th class="col-added">{{ sort_link('Added', 'added') }}</th>{% endif %}
                {% if 'enriched' in visible_columns %}<th class="col-enriched">Enriched</th>{% endif %}
                <th class="book-row-actions" aria-label="Actions"></th>
            </tr>
        </thead>
        <tbody>
            {% for book in page.books %}
            <tr class="book-row">
                <td class="book-row-select">
                    <label class="visually-hidden" for="bulk-select-{{ book.id }}">Select {{ book.metadata.title }}</label>
                    <input type="checkbox"
                           id="bulk-select-{{ book.id }}"
                           name="ids"
                           value="{{ book.id }}"
                           form="bulk-status-form">
                </td>
                <td class="book-row-cover">
                    <a href="{{ url_for('web.book_detail', book_id=book.id, return_to=list_url or none) }}" tabindex="-1" aria-hidden="true">
                        <img class="book-cover-thumb"
                             src="{{ url_for('web.book_cover', book_id=book.id) }}"
                             alt=""
                             loading="lazy"
                             width="40"
                             height="60">
                    </a>
                </td>
                <td class="book-row-title">
                    {%- set status = book_statuses.get(book.id) -%}
                    {%- if status and status.status == 1 -%}
                    <span class="book-status-chip status-reading" title="Reading" aria-label="Reading">&#128214;</span>
                    {%- elif status and status.status == 2 -%}
                    <span class="book-status-chip status-finished" title="Finished" aria-label="Finished">&#10003;</span>
                    {%- endif %}
                    <a href="{{ url_for('web.book_detail', book_id=book.id, return_to=list_url or none) }}">{{ book.metadata.title }}</a>
                </td>
                <td>{{ book.metadata.author }}</td>
                {% if 'series' in visible_columns %}<td class="col-series">{% if book.metadata.series %}{{ book.metadata.series }}{% if book.metadata.series_index is not none %} #{{ '%g'|format(book.metadata.series_index) }}{% endif %}{% endif %}</td>{% endif %}
                {% if 'isbn' in visible_columns %}<td class="col-isbn">{{ book.metadata.isbn or '' }}</td>{% endif %}
                {% if 'language' in visible_columns %}<td class="col-language">{{ book.metadata.language or '' }}</td>{% endif %}
                {% if 'publisher' in visible_columns %}<td class="col-publisher">{{ book.metadata.publisher or '' }}</td>{% endif %}
                {% if 'added' in visible_columns %}<td class="col-added">{{ book.date_added or '' }}</td>{% endif %}
                {% if 'enriched' in visible_columns %}<td class="col-enriched">{% if book.metadata_matched_at %}&#10003;{% endif %}</td>{% endif %}
                <td class="book-row-actions">
                    {# Native <details> menu, styled locally (not Pico's .dropdown,
                       which is select-shaped). Edit and Enrich are plain navigations
                       to their full pages; Delete loads the shared confirm partial
                       into the page-level #row-dialog. #}
                    <details class="row-actions">
                        <summary aria-label="Actions for {{ book.metadata.title }}">&#8942;</summary>
                        <ul>
                            <li><a href="{{ url_for('web.edit_form', book_id=book.id, return_to=list_url or none) }}">Edit</a></li>
                            <li><a href="{{ url_for('web.enrich_form', book_id=book.id, return_to=list_url or none) }}">Enrich</a></li>
                            <li><a href="#"
                                   class="row-action-delete"
                                   hx-get="{{ url_for('web.delete_confirm', book_id=book.id, in_dialog=1) }}"
                                   hx-target="#row-dialog"
                                   hx-swap="innerHTML">Delete&hellip;</a></li>
                        </ul>
                    </details>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    {# Mobile-only stacked card layout. Same data, different shell — CSS at
       768px hides the table and shows this block. Whole card is one link
       so the entire row is tappable on touch devices. #}
    <ul class="book-cards" aria-label="Books">
        {% for book in page.books %}
        <li class="book-cards-item">
            <input type="checkbox"
                   class="book-card-select"
                   id="bulk-select-card-{{ book.id }}"
                   name="ids"
                   value="{{ book.id }}"
                   form="bulk-status-form"
                   aria-label="Select {{ book.metadata.title }}">
            {% include "_book_card.html" %}
        </li>
        {% endfor %}
    </ul>

    {% if page.total_pages > 1 %}
    <nav class="pager" aria-label="Pagination">
        {% if page.has_prev %}
            <a class="pager-prev"
               href="{{ url_for('web.books', q=query.q or none, page=page.page - 1, sort=query.sort, dir=query.dir, **query.filters) }}"
               hx-get="{{ url_for('web.books', q=query.q or none, page=page.page - 1, sort=query.sort, dir=query.dir, **query.filters) }}"
               hx-target="#book-list"
               hx-push-url="true">&laquo; Previous</a>
        {% else %}
            <span class="pager-prev pager-disabled" aria-hidden="true">&laquo; Previous</span>
        {% endif %}

        <span class="pager-status">Page {{ page.page }} of {{ page.total_pages }}</span>

        {% if page.has_next %}
            <a class="pager-next"
               href="{{ url_for('web.books', q=query.q or none, page=page.page + 1, sort=query.sort, dir=query.dir, **query.filters) }}"
               hx-get="{{ url_for('web.books', q=query.q or none, page=page.page + 1, sort=query.sort, dir=query.dir, **query.filters) }}"
               hx-target="#book-list"
               hx-push-url="true">Next &raquo;</a>
        {% else %}
            <span class="pager-next pager-disabled" aria-hidden="true">Next &raquo;</span>
        {% endif %}
    </nav>
    {% endif %}
{% elif query.filters %}
    {# Filtered-to-zero state. Preserve the search query in the clear-filters
       link so a user who typed a query and then filtered into empty results
       can drop only the filters, not their search. #}
    <p class="empty-state">No books match these filters.</p>
    <p><a class="clear-filters" href="{{ url_for('web.books', q=query.q or none) }}">Clear filters</a></p>
{% elif query.q %}
    <p class="empty-state">No books matching '{{ query.q }}'</p>
{% else %}
    <p class="empty-state">Your library is empty. Run <code>bookery import</code> to add books.</p>
{% endif %}