{# Datastar-aware pagination for the cost drivers table.
   Uses data-on:click to update $driverPage signal and trigger SSE fetch.
   Expects: pagination (PaginationContext)
#}
{% if pagination.total_items > 0 %}
<div class="flex items-center justify-between px-4 py-3 border-t border-slate-200 dark:border-slate-800">
  <p class="ui-type-body-sm">
    Showing <span class="text-slate-900 dark:text-slate-100">{{ pagination.start_index }}</span>
    to <span class="text-slate-900 dark:text-slate-100">{{ pagination.end_index }}</span>
    of <span class="text-slate-900 dark:text-slate-100">{{ pagination.total_items }}</span> results
  </p>
  {% if pagination.total_pages > 1 %}
  <nav class="ui-pagination" aria-label="Model execution pagination">
    {# Previous #}
    {% if pagination.has_prev %}
      <button type="button"
        data-on:click="$driverPage = {{ pagination.page - 1 }}; @get('/dashboard/filter-drivers', {indicator: 'driverFetching'})"
        class="ui-page-link cursor-pointer">Prev</button>
    {% else %}
      <span class="ui-page-link ui-page-link-disabled">Prev</span>
    {% endif %}

    {# Page numbers #}
    {% for p in pagination.page_range(2) %}
      {% if p == pagination.page %}
        <span class="ui-page-link ui-page-link-active" aria-current="page">{{ p }}</span>
      {% else %}
        <button type="button"
          data-on:click="$driverPage = {{ p }}; @get('/dashboard/filter-drivers', {indicator: 'driverFetching'})"
          class="ui-page-link cursor-pointer">{{ p }}</button>
      {% endif %}
    {% endfor %}

    {# Next #}
    {% if pagination.has_next %}
      <button type="button"
        data-on:click="$driverPage = {{ pagination.page + 1 }}; @get('/dashboard/filter-drivers', {indicator: 'driverFetching'})"
        class="ui-page-link cursor-pointer">Next</button>
    {% else %}
      <span class="ui-page-link ui-page-link-disabled">Next</span>
    {% endif %}
  </nav>
  {% endif %}
</div>
{% endif %}