{% extends "base.html" %}
{% set title = "Library" %}
{% block content %}
<section class="page-head">
  <div>
    <div class="eyebrow">Preparedness library</div>
    <h1>Library</h1>
    <p class="muted">Search across hosted vault records. Full content and sync layers come next.</p>
  </div>
</section>

<section class="panel">
  <form method="get" class="search-row">
    <input type="text" name="q" value="{{ q }}" placeholder="Search title, author, category, or genre">
    <select name="category">
      <option value="">All categories</option>
      {% for row in categories %}
        <option value="{{ row['category'] }}" {% if category == row['category'] %}selected{% endif %}>{{ row['category'] }}</option>
      {% endfor %}
    </select>
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</section>

<section class="list-grid">
  {% for book in books %}
    <article class="book-card">
      <h3>{{ book["title"] }}</h3>
      <p>{{ book["author"] }}</p>
      <div class="meta-line">
        <span>{{ book["category"] }}</span>
        <span>{{ book["genre"] }}</span>
      </div>
    </article>
  {% else %}
    <article class="panel">
      <h3>No results</h3>
      <p>Nothing matched that search.</p>
    </article>
  {% endfor %}
</section>
{% endblock %}