{# 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 %}

{% 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 %}

  <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">
      {% if prev_url %}
      <button type="button"
              class="btn btn-sm btn-ghost"
              hx-get="{{ prev_url }}"
              hx-target="{{ target }}"
              hx-swap="outerHTML">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">Siguiente</button>
      {% endif %}
    </div>
  </nav>
</div>
{%- endmacro %}