{# Macro paginated_table
   Tabla con paginación HTMX. Asume que ``columns`` es lista de strings y
   ``rows`` lista de dicts con claves coincidentes (o lista de listas).

   Uso:
     {% from "core/components/paginated_table.html" import paginated_table %}
     {{ paginated_table(
         columns=["Email", "Rol"],
         keys=["email", "role"],
         rows=users,
         page=1,
         total_pages=4,
         prev_url="/api/users?page=0",
         next_url="/api/users?page=2"
     ) }}
#}
{% from "core/components/data_table.html" import data_table_open, tr_empty %}
{% from "core/components/icon.html" import icon %}

{% macro paginated_table(columns, rows, keys=none, page=1, total_pages=1,
                         prev_url=none, next_url=none, target="#dg-table",
                         empty_message="Sin datos") %}
<div id="{{ target | replace('#', '') }}" class="flex flex-col gap-3">
  {% call data_table_open(cols=columns) %}
    {% for row in rows %}
      <tr class="table-tr">
        {% if keys %}
          {% for k in keys %}
            <td class="table-td">{{ row[k] }}</td>
          {% endfor %}
        {% else %}
          {% for cell in row %}
            <td class="table-td">{{ cell }}</td>
          {% endfor %}
        {% endif %}
      </tr>
    {% else %}
      {{ tr_empty(empty_message, colspan=columns|length) }}
    {% endfor %}
  {% endcall %}

  {% set _indicator_id = target | replace('#', '') ~ '-loading' %}
  <nav class="flex items-center justify-between text-xs text-fg-muted" aria-label="Paginación">
    <span>Página <span class="font-medium text-fg">{{ page }}</span> de {{ total_pages }}</span>
    <div class="flex items-center gap-2">
      {# htmx muestra .htmx-indicator solo mientras hay request en vuelo #}
      <span id="{{ _indicator_id }}" class="htmx-indicator" aria-hidden="true">
        {{ icon("loader", class="w-4 h-4", aria_hidden=true) }}
      </span>
      {% if prev_url %}
      <button type="button"
              class="btn btn-sm btn-ghost"
              hx-get="{{ prev_url }}"
              hx-target="{{ target }}"
              hx-swap="outerHTML"
              hx-indicator="#{{ _indicator_id }}"
              hx-disabled-elt="this">Anterior</button>
      {% endif %}
      {% if next_url %}
      <button type="button"
              class="btn btn-sm btn-ghost"
              hx-get="{{ next_url }}"
              hx-target="{{ target }}"
              hx-swap="outerHTML"
              hx-indicator="#{{ _indicator_id }}"
              hx-disabled-elt="this">Siguiente</button>
      {% endif %}
    </div>
  </nav>
</div>
{%- endmacro %}