{% 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">
  <label style="display:inline-flex; align-items:center; gap:0.4rem; font-size:0.9rem; cursor:pointer; margin:0">
    <input type="checkbox" id="patron-include-inactive" name="include_inactive" value="1"
           {% if include_inactive %}checked{% endif %} style="margin:0">
    Include inactive patrons
  </label>
  <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 cb = document.getElementById('patron-include-inactive');
  if (cb) cb.addEventListener('change', function() { document.getElementById('patron-filter-form').submit(); });
})();
</script>
{% if not patrons %}
  {{ empty_state("No patrons on record", "Add patrons to start tracking checkouts and holds.", cta_href="/ui/patrons/new", cta_label="Add patron") }}
{% else %}
<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>
{% endif %}
{% endblock %}