{# 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="text-sm text-slate-600 dark:text-slate-300">
    Showing <span class="font-medium text-slate-800 dark:text-slate-200">{{ pagination.start_index }}</span>
    to <span class="font-medium text-slate-800 dark:text-slate-200">{{ pagination.end_index }}</span>
    of <span class="font-medium text-slate-800 dark:text-slate-200">{{ pagination.total_items }}</span> results
  </p>
  {% if pagination.total_pages > 1 %}
  <nav class="flex items-center gap-1">
    {# Previous #}
    {% if pagination.has_prev %}
      <button data-on:click="$driverPage = {{ pagination.page - 1 }}; @get('/dashboard/filter-drivers', {indicator: 'driverFetching'})"
        class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">Prev</button>
    {% else %}
      <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Prev</span>
    {% endif %}

    {# Page numbers #}
    {% for p in pagination.page_range(2) %}
      {% if p == pagination.page %}
        <span class="px-3 py-1.5 text-sm border border-brand-500 bg-brand-50 dark:bg-brand-700/30 text-brand-700 dark:text-brand-200 font-medium">{{ p }}</span>
      {% else %}
        <button data-on:click="$driverPage = {{ p }}; @get('/dashboard/filter-drivers', {indicator: 'driverFetching'})"
          class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">{{ p }}</button>
      {% endif %}
    {% endfor %}

    {# Next #}
    {% if pagination.has_next %}
      <button data-on:click="$driverPage = {{ pagination.page + 1 }}; @get('/dashboard/filter-drivers', {indicator: 'driverFetching'})"
        class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer">Next</button>
    {% else %}
      <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Next</span>
    {% endif %}
  </nav>
  {% endif %}
  {% if local_model_dashboard and pagination.total_items > 5 and pagination.page_size == 5 %}
    <button data-on:click="$driverPage = 1; $driverPageSize = 10; @get('/dashboard/filter-drivers', {indicator: 'driverFetching'})"
      class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer rounded">
      View all models
    </button>
  {% endif %}
</div>
{% endif %}