{% extends "base.html" %}
{% block title %}{{ admin.get_verbose_name_plural() }} · {{ site.title }}{% endblock %}
{% block content %}
<section class="tempest-admin-list">
  <header class="tempest-admin-list__header">
    <h1>{{ admin.get_verbose_name_plural() }}</h1>
    <p>{{ pagination.total }} record{{ pagination.total|pluralize }}.</p>
  </header>
  {% if flash %}
  <div class="tempest-admin-flash tempest-admin-flash--{{ flash_cat }}" role="status">{{ flash }}</div>
  {% endif %}
  <div class="tempest-admin-list__toolbar">
    <form method="get" class="tempest-admin-list__filters">
      {% if admin.search_fields %}
      <input type="search" name="q" value="{{ query.q or '' }}" placeholder="Search…" aria-label="Search">
      {% endif %}
      {% for f in filters %}
      <label>
        <span>{{ f.label }}</span>
        {% if f.type == 'select' %}
        <select name="filter_{{ f.field }}">
          <option value="">— any —</option>
          {% for option in f.options %}
          <option value="{{ option.value }}" {% if option.selected %}selected{% endif %}>
            {{ option.label }}
          </option>
          {% endfor %}
        </select>
        {% elif f.type == 'daterange' %}
        <span class="tempest-admin-list__daterange">
          <input type="date" name="filter_{{ f.field }}_from" value="{{ f.value_from }}" aria-label="{{ f.label }} from">
          <input type="date" name="filter_{{ f.field }}_to" value="{{ f.value_to }}" aria-label="{{ f.label }} to">
        </span>
        {% else %}
        <input type="text" name="filter_{{ f.field }}" value="{{ f.value }}">
        {% endif %}
      </label>
      {% endfor %}
      {% if admin.search_fields or admin.list_filter %}
      <button type="submit">Apply</button>
      {% endif %}
    </form>
    <div class="tempest-admin-list__actions">
      {% if can_create %}<a class="tempest-admin-list__new" href="{{ new_url }}">+ New</a>{% endif %}
      <a href="{{ url_for('admin_export', slug=admin.get_slug(), fmt='csv') }}{% if export_query %}?{{ export_query }}{% endif %}">Export CSV</a>
      <a href="{{ url_for('admin_export', slug=admin.get_slug(), fmt='json') }}{% if export_query %}?{{ export_query }}{% endif %}">Export JSON</a>
    </div>
  </div>
  {% set ncols = columns|length + 1 + (1 if bulk_actions else 0) %}
  {% if bulk_actions %}
  <form method="post" action="{{ bulk_url }}" class="tempest-admin-bulk" onsubmit="return confirm('Apply the selected action to the checked rows?');">
    <input type="hidden" name="csrf_token" value="{{ session.csrf_token }}">
    <div class="tempest-admin-bulk__bar">
      <select name="action" aria-label="Bulk action">
        {% for value, label in bulk_actions %}
        <option value="{{ value }}">{{ label }}</option>
        {% endfor %}
      </select>
      <button type="submit">Apply to selected</button>
    </div>
  {% endif %}
    <div class="tempest-admin-table-wrap">
      <table class="tempest-admin-list__table">
        <thead>
          <tr>
            {% if bulk_actions %}<th class="tempest-admin-list__check"><input type="checkbox" data-select-all aria-label="Select all"></th>{% endif %}
            {% for column in columns %}
            <th>
              {% if column in sort_state %}
              {% set state = sort_state[column] %}
              <a class="tempest-sort {% if state.active %}tempest-sort--active{% endif %}" href="{{ state.url }}">
                <span>{{ column }}</span>
                <span class="tempest-sort__arrow" aria-hidden="true">{% if state.active %}{% if state.ascending %}▲{% else %}▼{% endif %}{% else %}↕{% endif %}</span>
              </a>
              {% else %}{{ column }}{% endif %}
            </th>
            {% endfor %}
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
          <tr>
            {% if bulk_actions %}<td class="tempest-admin-list__check"><input type="checkbox" name="ids" value="{{ row.pk }}" data-row-check aria-label="Select row"></td>{% endif %}
            {% for column in columns %}<td>{{ row.values[column] }}</td>{% endfor %}
            <td>
              <a href="{{ url_for('admin_detail', slug=admin.get_slug(), identity=row.identity) }}">View</a>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="{{ ncols }}">No records.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% if bulk_actions %}
  </form>
  <script>
    (function () {
      var master = document.querySelector('[data-select-all]');
      if (!master) return;
      master.addEventListener('change', function () {
        document.querySelectorAll('[data-row-check]').forEach(function (box) {
          box.checked = master.checked;
        });
      });
    })();
  </script>
  {% endif %}
  {% if pagination.pages > 1 %}
  <nav class="tempest-admin-list__pagination" aria-label="Pagination">
    {% if pagination.page > 1 %}
    <a href="?{{ pagination.query_for(pagination.page - 1) }}">← Prev</a>
    {% endif %}
    <span>Page {{ pagination.page }} of {{ pagination.pages }}</span>
    {% if pagination.page < pagination.pages %}
    <a href="?{{ pagination.query_for(pagination.page + 1) }}">Next →</a>
    {% endif %}
  </nav>
  {% endif %}
</section>
{% endblock %}