{% macro pagination_header(items, navigator, target_selector) %}
    <div
      class="flex flex-col gap-3 border-b border-amber-200/70 px-4 py-3 text-xs text-stone-600 sm:flex-row sm:items-center sm:justify-between"
    >
      <p>
        Showing {{ items.start_index() }}&ndash;{{ items.end_index() }} of {{ items.total }}
        results
      </p>
      <div class="flex flex-wrap items-center gap-3">
        <div class="flex items-center gap-2">
          <button
            type="button"
            class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
            {% if items.has_previous() %}
            data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
            {% else %}
            disabled
            {% endif %}
          >
            <span aria-hidden="true">←</span>
            <span>Previous</span>
          </button>
          {% if items.is_showing_all() %}
          <span class="font-semibold text-amber-800">Showing all results</span>
          {% else %}
          <span class="font-semibold text-amber-800"
            >Page {{ items.page }} of {{ items.total_pages() }}</span
          >
          {% endif %}
          <button
            type="button"
            class="inline-flex items-center gap-1 rounded-full border border-amber-400 px-3 py-1 font-semibold transition hover:border-amber-500 hover:text-amber-800 disabled:cursor-not-allowed disabled:border-amber-200 disabled:text-amber-300"
            {% if items.has_next() %}
            data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.next_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
            {% else %}
            disabled
            {% endif %}
          >
            <span>Next</span>
            <span aria-hidden="true">→</span>
          </button>
        </div>
        <label class="flex items-center gap-2 text-xs font-semibold text-stone-600">
          <span>Rows</span>
          <select
            class="rounded-md border border-amber-300 bg-white px-2 py-1 text-xs font-semibold text-amber-800 transition hover:border-amber-400"
            data-on:change="history.pushState(null, '', evt.target.selectedOptions[0].dataset.url); @get(evt.target.selectedOptions[0].dataset.href, {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
          >
            <option value="5" data-href="{{ navigator.fragment_rows_href("5")|safe }}" data-url="{{ navigator.rows_href("5")|safe }}" {% if items.is_page_size(5) %}selected{% endif %}>5</option>
            <option value="10" data-href="{{ navigator.fragment_rows_href("10")|safe }}" data-url="{{ navigator.rows_href("10")|safe }}" {% if items.is_page_size(10) %}selected{% endif %}>10</option>
            <option value="20" data-href="{{ navigator.fragment_rows_href("20")|safe }}" data-url="{{ navigator.rows_href("20")|safe }}" {% if items.is_page_size(20) %}selected{% endif %}>20</option>
            <option value="50" data-href="{{ navigator.fragment_rows_href("50")|safe }}" data-url="{{ navigator.rows_href("50")|safe }}" {% if items.is_page_size(50) %}selected{% endif %}>50</option>
            <option value="all" data-href="{{ navigator.fragment_rows_href("all")|safe }}" data-url="{{ navigator.rows_href("all")|safe }}" {% if items.is_showing_all() %}selected{% endif %}>All</option>
          </select>
        </label>
      </div>
    </div>
{% endmacro %}

{% macro sortable_header(label, key, navigator, target_selector) %}
    {% set is_sorted = navigator.is_sorted_by(key) %}
    <th
      scope="col"
      class="px-4 py-3"
      aria-sort="{% if is_sorted %}{% if navigator.sort_direction() == "asc" %}ascending{% else %}descending{% endif %}{% else %}none{% endif %}"
    >
      <button
        type="button"
        class="flex items-center gap-1 text-amber-900 hover:text-amber-700"
        data-on:click="history.pushState(null, '', '{{ navigator.sort_href(key)|safe }}'); @get('{{ navigator.fragment_sort_href(key)|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
      >
        <span>{{ label }}</span>
        {% if is_sorted %}
        {% if navigator.sort_direction() == "asc" %}
        <span aria-hidden="true">↑</span>
        {% else %}
        <span aria-hidden="true">↓</span>
        {% endif %}
        {% else %}
        <span aria-hidden="true">↕</span>
        {% endif %}
      </button>
    </th>
{% endmacro %}