{# Reusable pagination component.
   Expects: pagination (PaginationContext), base_url (str)
#}
{% 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 %}
      <a href="{{ base_url }}&page={{ pagination.page - 1 }}"
        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">Prev</a>
    {% 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 %}
        <a href="{{ base_url }}&page={{ p }}"
          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">{{ p }}</a>
      {% endif %}
    {% endfor %}

    {# Next #}
    {% if pagination.has_next %}
      <a href="{{ base_url }}&page={{ pagination.page + 1 }}"
        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">Next</a>
    {% 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 %}
</div>
{% endif %}