{# Datastar-aware pagination for the opportunity explorer.
   Uses data-on:click to update $expPage 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="Opportunity explorer pagination">
    {# Previous #}
    {% if pagination.has_prev %}
      <button
        type="button"
        onclick="window.goToExplorerPage({{ pagination.page - 1 }})"
        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"
          onclick="window.goToExplorerPage({{ p }})"
          class="ui-page-link cursor-pointer"
        >{{ p }}</button>
      {% endif %}
    {% endfor %}

    {# Next #}
    {% if pagination.has_next %}
      <button
        type="button"
        onclick="window.goToExplorerPage({{ pagination.page + 1 }})"
        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 %}