{% extends "base.html" %}
{% from "_macros.html" import cover_url %}
{% from "_partials/brand_glyph.html" import brand_glyph %}
{% block title %}Catalog — {{ library_name() }}{% endblock %}
{% block content %}

{% if show_landing %}
<div class="catalog-hero">
  {{ brand_glyph('4.5rem', label=library_name() ~ ' logo') }}
  <div class="catalog-hero-name">{{ library_name() }}</div>
  <div class="catalog-hero-tagline">Search your collection</div>
</div>
{% endif %}

<form method="get" action="/ui/catalog" id="catalog-form" class="catalog-search-form">
  <select name="field" style="max-width:10rem; flex-shrink:0; margin-bottom:0">
    <option value="all" {% if field == "all" %}selected{% endif %}>All fields</option>
    <option value="title" {% if field == "title" %}selected{% endif %}>Title</option>
    <option value="author" {% if field == "author" %}selected{% endif %}>Author</option>
    <option value="publisher" {% if field == "publisher" %}selected{% endif %}>Publisher</option>
    <option value="isbn" {% if field == "isbn" %}selected{% endif %}>ISBN</option>
  </select>
  <select name="order_by" style="max-width:10rem; flex-shrink:0; margin-bottom:0"
          hx-get="/ui/catalog/search-results"
          hx-trigger="change"
          hx-target="#results"
          hx-include="closest form"
          hx-indicator="#search-ind">
    <option value="title" {% if order_by == "title" %}selected{% endif %}>Sort: Title</option>
    <option value="author" {% if order_by == "author" %}selected{% endif %}>Sort: Author</option>
    <option value="recent" {% if order_by == "recent" %}selected{% endif %}>Sort: Recent</option>
    <option value="relevance" {% if order_by == "relevance" %}selected{% endif %}>Sort: Relevance</option>
  </select>
  <div class="suggest-wrap">
    <input id="q-input" type="search" name="q" placeholder="Search…" value="{{ q }}"
           {% if show_landing %}autofocus{% endif %}
           role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="suggest-list"
           autocomplete="off"
           hx-get="/ui/catalog/search-results"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#results"
           hx-include="closest form"
           hx-indicator="#search-ind"
           style="width:100%; min-width:12rem; margin-bottom:0">
    <div id="suggest-list"
         hx-get="/ui/catalog/suggest"
         hx-trigger="input changed delay:200ms from:#q-input"
         hx-include="#q-input"
         hx-target="this"
         hx-swap="innerHTML"
         role="listbox" aria-label="Suggestions"></div>
  </div>
  <input type="hidden" name="media" value="{{ media|join(',') }}">
  <input type="hidden" name="decade" value="{{ decade if decade is not none else '' }}">
  <input type="hidden" name="avail" value="{% if avail %}1{% else %}{% endif %}">
  <input type="hidden" name="include_withdrawn" value="{% if include_withdrawn %}1{% else %}{% endif %}">
  <button type="submit" style="margin-bottom:0;width:auto">Search</button>
  <span id="search-ind" class="htmx-indicator" aria-label="Loading…"></span>
</form>

{% if show_landing %}

  {% if featured_lists %}
  {% for cl in featured_lists %}
  <div class="discovery-shelves">
    <h3><a href="/ui/lists/{{ cl.slug }}">{{ cl.name }}</a></h3>
    {% if cl.description %}<p class="shelf-description">{{ cl.description }}</p>{% endif %}
    <ul class="cover-shelf">
      {% for entry in cl.entries[:8] %}
      <li>
        <a href="/ui/catalog/{{ entry.work.id }}" title="{{ entry.work.title }}">
          <div class="cover-thumb cover-thumb-shelf{% if not entry.work.cover_image_url %} cover-thumb-empty{% endif %}"
               {% if not entry.work.cover_image_url %}data-media-type="{{ entry.work.media_type.code if entry.work.media_type else 'book' }}"{% endif %}
               aria-hidden="true">
            {% if entry.work.cover_image_url %}
            <img src="{{ cover_url(entry.work.cover_image_url, entry.work.updated_at) }}" alt="" loading="lazy">
            {% endif %}
          </div>
          <small class="shelf-title">{{ entry.work.title }}</small>
          {% if entry.work.creators %}<small class="shelf-creator">{{ entry.work.creators[0].creator.display_name }}</small>{% endif %}
        </a>
      </li>
      {% endfor %}
    </ul>
    <p class="shelf-more"><a href="/ui/lists/{{ cl.slug }}">View all {{ cl.entries | length }} item{{ 's' if cl.entries | length != 1 else '' }} &rarr;</a></p>
  </div>
  {% endfor %}
  {% endif %}

  {% if new_arrivals %}
  <div class="discovery-shelves">
    <h3>New arrivals</h3>
    <ul class="cover-shelf">
      {% for w in new_arrivals %}
      <li>
        <a href="/ui/catalog/{{ w.id }}" title="{{ w.title }}">
          <div class="cover-thumb cover-thumb-shelf{% if not w.cover_image_url %} cover-thumb-empty{% endif %}"
               {% if not w.cover_image_url %}data-media-type="{{ w.media_type.code if w.media_type else 'book' }}"{% endif %}
               aria-hidden="true">
            {% if w.cover_image_url %}<img src="{{ cover_url(w.cover_image_url, w.updated_at) }}" alt="" loading="lazy">{% endif %}
          </div>
          <small class="shelf-title">{{ w.title }}</small>
          {% if w.creators %}<small class="shelf-creator">{{ w.creators[0].creator.display_name }}</small>{% endif %}
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  {% if recently_returned %}
  <div class="discovery-shelves">
    <h3>Recently returned</h3>
    <ul class="cover-shelf">
      {% for w in recently_returned %}
      <li>
        <a href="/ui/catalog/{{ w.id }}" title="{{ w.title }}">
          <div class="cover-thumb cover-thumb-shelf{% if not w.cover_image_url %} cover-thumb-empty{% endif %}"
               {% if not w.cover_image_url %}data-media-type="{{ w.media_type.code if w.media_type else 'book' }}"{% endif %}
               aria-hidden="true">
            {% if w.cover_image_url %}<img src="{{ cover_url(w.cover_image_url, w.updated_at) }}" alt="" loading="lazy">{% endif %}
          </div>
          <small class="shelf-title">{{ w.title }}</small>
          {% if w.creators %}<small class="shelf-creator">{{ w.creators[0].creator.display_name }}</small>{% endif %}
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  {% if new_arrivals or recently_returned %}<h3 class="discovery-section-head">All works</h3>{% endif %}
  <div id="results">
    {% include "_partials/work_list.html" %}
  </div>

{% else %}

  <div class="catalog-layout">
    <aside class="catalog-facets">
      <details class="facet-drawer" open>
      <summary>Filter</summary>
      {% if page %}
      {% if page.facets.media_type %}
      <details open>
        <summary><strong>Media type</strong></summary>
        <ul class="facet-list">
          {% for code, name, count in page.facets.media_type %}
          <li>
            <label>
              <input type="checkbox" data-facet="media" value="{{ code }}"
                     {% if code in media %}checked{% endif %}>
              {{ name }} <small>({{ count }})</small>
            </label>
          </li>
          {% endfor %}
        </ul>
      </details>
      {% endif %}
      {% if page.facets.decade %}
      <details open>
        <summary><strong>Decade</strong></summary>
        <ul class="facet-list">
          {% for d, count in page.facets.decade %}
          <li>
            <label>
              <input type="radio" name="facet-decade" data-facet="decade" value="{{ d }}"
                     {% if decade == d %}checked{% endif %}>
              {{ d }}s <small>({{ count }})</small>
            </label>
          </li>
          {% endfor %}
          {% if decade is not none %}
          <li><a href="#" data-clear="decade"><small>Clear</small></a></li>
          {% endif %}
        </ul>
      </details>
      {% endif %}
      <details open>
        <summary><strong>Availability</strong></summary>
        <ul class="facet-list">
          <li>
            <label>
              <input type="checkbox" data-facet="avail" value="1"
                     {% if avail %}checked{% endif %}>
              Available now <small>({{ page.facets.available_now }})</small>
            </label>
          </li>
        </ul>
      </details>
      {% if can_include_withdrawn %}
      <details open>
        <summary><strong>Staff</strong></summary>
        <ul class="facet-list">
          <li>
            <label>
              <input type="checkbox" data-facet="include_withdrawn" value="1"
                     {% if include_withdrawn %}checked{% endif %}>
              Include withdrawn-only
            </label>
          </li>
        </ul>
      </details>
      {% endif %}
      {% if media or decade is not none or avail %}
      <p><a href="/ui/catalog?q={{ q }}&field={{ field }}"><small>Clear all filters</small></a></p>
      {% endif %}
      {% endif %}
      </details>
    </aside>

    <section class="catalog-main">
      <div id="results">
        {% include "_partials/work_list.html" %}
      </div>
    </section>
  </div>

{% endif %}

{% endblock %}

{% block scripts %}
<script nonce="{{ csp_nonce(request) }}">
  (function () {
    var form = document.getElementById('catalog-form');
    if (!form) return;

    // Re-sync facet inputs from the URL on every pageshow. Browsers restore
    // pre-navigation form state from bfcache on Back/Forward, which can leave
    // a checkbox "checked" on a page whose URL has no matching filter.
    function syncFromUrl() {
      var params = new URLSearchParams(location.search);
      var media = (params.get('media') || '').split(',').filter(Boolean);
      document.querySelectorAll('input[data-facet="media"]').forEach(function (cb) {
        cb.checked = media.indexOf(cb.value) !== -1;
      });
      if (form.elements.media) form.elements.media.value = media.join(',');
      var decade = params.get('decade') || '';
      document.querySelectorAll('input[data-facet="decade"]').forEach(function (rb) {
        rb.checked = rb.value === decade;
      });
      if (form.elements.decade) form.elements.decade.value = decade;
      var avail = params.get('avail') === '1';
      document.querySelectorAll('input[data-facet="avail"]').forEach(function (cb) {
        cb.checked = avail;
      });
      if (form.elements.avail) form.elements.avail.value = avail ? '1' : '';
      var incWd = params.get('include_withdrawn') === '1';
      document.querySelectorAll('input[data-facet="include_withdrawn"]').forEach(function (cb) {
        cb.checked = incWd;
      });
      if (form.elements.include_withdrawn) form.elements.include_withdrawn.value = incWd ? '1' : '';
    }
    window.addEventListener('pageshow', syncFromUrl);

    var media = (form.elements.media ? form.elements.media.value || '' : '').split(',').filter(Boolean);
    var setMediaInput = function () {
      if (form.elements.media) form.elements.media.value = media.join(',');
    };
    document.querySelectorAll('input[data-facet="media"]').forEach(function (cb) {
      cb.addEventListener('change', function () {
        var v = cb.value;
        var i = media.indexOf(v);
        if (cb.checked && i === -1) media.push(v);
        if (!cb.checked && i !== -1) media.splice(i, 1);
        setMediaInput();
        form.submit();
      });
    });
    document.querySelectorAll('input[data-facet="decade"]').forEach(function (rb) {
      rb.addEventListener('change', function () {
        if (form.elements.decade) form.elements.decade.value = rb.value;
        form.submit();
      });
    });
    document.querySelectorAll('[data-clear="decade"]').forEach(function (a) {
      a.addEventListener('click', function (e) {
        e.preventDefault();
        if (form.elements.decade) form.elements.decade.value = '';
        form.submit();
      });
    });
    document.querySelectorAll('input[data-facet="avail"]').forEach(function (cb) {
      cb.addEventListener('change', function () {
        if (form.elements.avail) form.elements.avail.value = cb.checked ? '1' : '';
        form.submit();
      });
    });
    document.querySelectorAll('input[data-facet="include_withdrawn"]').forEach(function (cb) {
      cb.addEventListener('change', function () {
        if (form.elements.include_withdrawn) form.elements.include_withdrawn.value = cb.checked ? '1' : '';
        form.submit();
      });
    });
  })();
</script>
<script nonce="{{ csp_nonce(request) }}">
(() => {
  const input = document.getElementById('q-input');
  const list = document.getElementById('suggest-list');
  if (!input || !list) return;
  const sync = () => input.setAttribute('aria-expanded', list.children.length > 0 ? 'true' : 'false');
  list.addEventListener('htmx:afterSwap', sync);
  document.addEventListener('click', (e) => {
    if (!list.contains(e.target) && e.target !== input) {
      list.innerHTML = '';
      sync();
    }
  });
})();
</script>
{% endblock %}