{% extends "base.html" %}
{% from "_partials/empty_state.html" import empty_state %}
{% block title %}Patrons — {{ library_name() }}{% endblock %}
{% block content %}
<div style="display:flex; align-items:baseline; gap:1rem; margin-bottom:1rem">
  <h2 style="margin:0">Patrons</h2>
  <a href="/ui/patrons/new" role="button" class="outline" style="padding:0.25rem 0.75rem">+ New Patron</a>
</div>
<form method="get" action="/ui/patrons" id="patron-filter-form" style="margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap">
  <input type="search" name="q" value="{{ q }}" placeholder="Name, card # or email"
         aria-label="Search patrons" style="margin:0; max-width:16rem">
  <select name="status" id="patron-status" aria-label="Status filter" style="margin:0; width:auto">
    <option value="active" {% if status == 'active' %}selected{% endif %}>Active</option>
    <option value="inactive" {% if status == 'inactive' %}selected{% endif %}>Inactive</option>
    <option value="all" {% if status == 'all' %}selected{% endif %}>All</option>
  </select>
  <button type="submit" class="outline" style="padding:0.2rem 0.6rem; font-size:0.85rem">Apply</button>
</form>
<script nonce="{{ csp_nonce(request) }}">
(function() {
  var sel = document.getElementById('patron-status');
  if (sel) sel.addEventListener('change', function() { document.getElementById('patron-filter-form').submit(); });
})();
</script>
{% if not patrons %}
  {% if q or status != 'active' %}
    <p class="empty-inline">No patrons match these filters.</p>
  {% else %}
    {{ empty_state("No patrons on record", "Add patrons to start tracking checkouts and holds.", cta_href="/ui/patrons/new", cta_label="Add patron") }}
  {% endif %}
{% else %}
<p style="margin-bottom:0.5rem"><small>{{ total }} patron{{ '' if total == 1 else 's' }}</small></p>
<table class="responsive-table">
  <thead>
    <tr><th>Name</th><th>Card #</th><th>Status</th></tr>
  </thead>
  <tbody>
    {% for patron in patrons %}
    <tr>
      <td data-label="Name"><a href="/ui/patrons/{{ patron.library_card_number }}">{{ patron.full_name }}</a></td>
      <td data-label="Card #"><code>{{ patron.library_card_number }}</code></td>
      <td data-label="Status">{% if patron.is_active %}Active{% else %}<em>Inactive</em>{% endif %}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% if has_prev or has_next %}
<nav style="display:flex; justify-content:space-between; align-items:center; margin-top:1rem">
  {% if has_prev %}
    <a href="/ui/patrons?{{ filters_qs + ('&' if filters_qs else '') }}page={{ page - 1 }}" role="button" class="secondary outline">← Previous</a>
  {% else %}<span></span>{% endif %}
  <small>Page {{ page }}</small>
  {% if has_next %}
    <a href="/ui/patrons?{{ filters_qs + ('&' if filters_qs else '') }}page={{ page + 1 }}" role="button" class="secondary outline">Next →</a>
  {% else %}<span></span>{% endif %}
</nav>
{% endif %}
{% endif %}
{% endblock %}