{% extends "base.html" %}

{% block title %}Library - Bookery{% endblock %}

{% block content %}
<h1 class="page-title">Library</h1>
<form class="search-bar"
      action="{{ url_for('web.books') }}"
      method="get"
      role="search">
    <label class="visually-hidden" for="search-q">Search books</label>
    <input type="search"
           id="search-q"
           name="q"
           placeholder="Search books..."
           value="{{ query.q }}"
           hx-get="{{ url_for('web.books') }}"
           hx-trigger="keyup changed delay:300ms"
           hx-target="#book-list"
           hx-include="this"
           hx-push-url="true">
    <button type="submit" class="btn btn-secondary">Search</button>
</form>

{% include "_columns_menu.html" %}

<div id="book-list">
    {% include "_book_list.html" %}
</div>

{# Row-action Delete loads the confirm partial here, then the dialog opens
   itself on swap. Esc / backdrop close it; the confirm's Cancel button does
   too (in_dialog mode). On success the POST sends HX-Redirect to /books. #}
<dialog id="row-dialog" hx-on::after-swap="this.showModal()"></dialog>

<script>
    // Select-all toggles every row checkbox in the table. Delegated on
    // document so it survives htmx swaps of #book-list.
    document.addEventListener("change", function (e) {
        if (!e.target.matches?.(".select-all")) return;
        document
            .querySelectorAll(".book-table input[name='ids']")
            .forEach(function (cb) { cb.checked = e.target.checked; });
    });
</script>
{% endblock %}