{% comment %}
Reusable paginated data table with Alpine-rendered rows.
Expects parent Alpine scope: tableLoading, totalCount, currentPage, hasPrev, hasNext, firstPage, prevPage, nextPage, lastPage
Plus: rows (via rows_key), page size (via page_size_key). For run tables: cols, colsOpen.
Params:
  rows_key - Alpine variable name for rows array (e.g. "tableTraces", "tableGoldSets", "tableRuns")
  page_size_key - Alpine variable name for page size (e.g. "pageSize", "tableLimit")
  columns - list of {key, header, visible_key?, cell_class?, cell_class_key?, cell_url_key?}
  title - card header text
  row_click_url_key - key in row for row click URL (default: "detail_url")
  show_actions - optional, show actions column
  actions - optional list of {label, url_key, variant?}
  column_picker_template - optional path for column picker include
  empty_message - optional custom empty state message
  selectable - optional, enable checkbox row selection with bulk actions
  bulk_delete_fn - optional, function name for bulk delete (e.g. "bulkDeleteRuns")
{% endcomment %}
{% with col_count=columns|length %}
<c-card x-data="{
  _selected: new Set(),
  _lastChecked: null,
  get selectedIds() { return [...this._selected]; },
  get selectedCount() { return this._selected.size; },
  isSelected(id) { return this._selected.has(id); },
  toggleRow(id, idx, event) {
    if (event.shiftKey && this._lastChecked !== null) {
      var rows = {{ rows_key }};
      var start = Math.min(this._lastChecked, idx);
      var end = Math.max(this._lastChecked, idx);
      var shouldSelect = !this._selected.has(id);
      for (var i = start; i <= end; i++) {
        if (rows[i] && rows[i].id != null) {
          if (shouldSelect) { this._selected.add(rows[i].id); }
          else { this._selected.delete(rows[i].id); }
        }
      }
      this._selected = new Set(this._selected);
    } else {
      if (this._selected.has(id)) { this._selected.delete(id); }
      else { this._selected.add(id); }
      this._selected = new Set(this._selected);
    }
    this._lastChecked = idx;
  },
  toggleAll() {
    var rows = {{ rows_key }};
    if (this._selected.size === rows.length) {
      this._selected = new Set();
    } else {
      this._selected = new Set(rows.map(function(r) { return r.id; }));
    }
    this._lastChecked = null;
  },
  clearSelection() { this._selected = new Set(); this._lastChecked = null; },
  get allSelected() { return {{ rows_key }}.length > 0 && this._selected.size === {{ rows_key }}.length; }
}">
  <c-card-header class="overflow-visible">
    <div class="flex flex-row items-center justify-between w-full">
      <c-card-title class="shrink-0">{{ title|default:"" }}</c-card-title>
      <div class="flex flex-row items-center gap-2 shrink-0 overflow-visible">
        {% if column_picker_template %}
        {% include column_picker_template %}
        {% endif %}
        {% if export_url %}
        <div class="relative" x-data="{ exportOpen: false }" @click.outside="exportOpen = false">
          <c-button variant="outline" size="sm" class="h-9" @click="exportOpen = !exportOpen">Export</c-button>
          <div x-show="exportOpen" x-cloak x-transition
               class="absolute right-0 mt-1 w-40 rounded-md border border-border bg-popover shadow-md z-50">
            {% if not export_formats or "csv" in export_formats %}
            <button @click="exportRuns('csv'); exportOpen = false"
                    class="block w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors rounded-t-md">
              Export CSV
            </button>
            {% endif %}
            {% if not export_formats or "json" in export_formats %}
            <button @click="exportRuns('json'); exportOpen = false"
                    class="block w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors {% if not export_formats or 'csv' not in export_formats %}rounded-t-md{% endif %}">
              Export JSON
            </button>
            {% endif %}
            {% if not export_formats or "xlsx" in export_formats %}
            <button @click="exportRuns('xlsx'); exportOpen = false"
                    class="block w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors rounded-b-md">
              Export Excel
            </button>
            {% endif %}
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </c-card-header>
  <c-card-content>
    <!-- Bulk action bar -->
    {% if selectable %}
    <div x-show="selectedCount > 0" x-cloak x-transition
         class="flex items-center justify-between gap-3 px-3 py-2 mb-2 rounded-md border border-primary/30 bg-primary/5 text-sm">
      <span class="text-foreground font-medium" x-text="selectedCount + ' selected'"></span>
      <div class="flex items-center gap-2">
        {% if bulk_delete_fn %}
        <button type="button"
                @click="if (confirm('Delete ' + selectedCount + ' item(s)?')) { {{ bulk_delete_fn }}(selectedIds); clearSelection(); }"
                class="h-8 px-3 rounded-md border border-destructive/30 bg-destructive/10 text-destructive text-sm font-medium hover:bg-destructive/20 transition-colors">
          Delete
        </button>
        {% endif %}
        <button type="button" @click="clearSelection()"
                class="h-8 px-3 rounded-md border border-input bg-background text-sm font-medium hover:bg-muted transition-colors">
          Cancel
        </button>
      </div>
    </div>
    {% endif %}
    <div class="relative w-full overflow-auto">
      <table class="w-full caption-bottom text-sm">
        <thead class="[&_tr]:border-b bg-muted/50">
          <tr class="border-b transition-colors">
            {% if selectable %}
            <th class="h-10 w-10 px-2 text-center align-middle">
              <input type="checkbox" :checked="allSelected" @click.stop="toggleAll()"
                     class="h-4 w-4 rounded border-input accent-primary cursor-pointer" />
            </th>
            {% endif %}
            {% for col in columns %}
            <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground"
                {% if col.visible_key %}x-show="cols.{{ col.visible_key }}"{% endif %}>{{ col.header }}</th>
            {% endfor %}
            {% if show_actions %}
            <th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground">Actions</th>
            {% endif %}
          </tr>
        </thead>
        <tbody class="[&_tr:last-child]:border-0">
          <template x-for="(row, rowIdx) in {{ rows_key }}" :key="row.id">
            <tr class="border-b transition-colors hover:bg-muted/30 cursor-pointer group"
                :class="isSelected(row.id) ? 'bg-primary/5' : ''"
                @click="{% if selectable %}if (selectedCount > 0) { toggleRow(row.id, rowIdx, $event); return; }{% endif %}window.location.href = row['{{ row_click_url_key|default:"detail_url" }}']">
              {% if selectable %}
              <td class="p-2 w-10 text-center align-middle" @click.stop>
                <input type="checkbox" :checked="isSelected(row.id)"
                       @click.stop="toggleRow(row.id, rowIdx, $event)"
                       class="h-4 w-4 rounded border-input accent-primary cursor-pointer" />
              </td>
              {% endif %}
              {% for col in columns %}
              <td class="p-2 align-middle"
                  {% if col.visible_key %}x-show="cols.{{ col.visible_key }}"{% endif %}>
                {% if col.cell_url_key %}
                <a :href="row['{{ col.cell_url_key }}'] || '#'" class="text-primary hover:underline" x-text="row['{{ col.key }}']" @click.stop></a>
                {% else %}
                <span class="{% if col.cell_class %}{{ col.cell_class }}{% endif %}"
                      {% if col.cell_class_key %}:class="row['{{ col.cell_class_key }}'] || ''"{% endif %}
                      x-text="row['{{ col.key }}']"></span>
                {% endif %}
              </td>
              {% endfor %}
              {% if show_actions %}
              <td class="p-2 align-middle" @click.stop>
                <div class="flex items-center gap-1 flex-wrap">
                  {% for action in actions %}
                  {% if action.url_key %}
                  <a :href="row['{{ action.url_key }}'] || '#'"
                     class="text-sm {% if action.variant == 'destructive' %}text-destructive{% else %}text-primary{% endif %} hover:underline"
                     @click.stop>{{ action.label }}</a>
                  {% elif action.click_fn %}
                  <button type="button"
                          @click.stop="{{ action.click_fn }}(row)"
                          class="text-sm {% if action.variant == 'destructive' %}text-destructive{% else %}text-primary{% endif %} hover:underline bg-transparent border-0 p-0 cursor-pointer">{{ action.label }}</button>
                  {% endif %}
                  {% if not forloop.last %}<span class="text-muted-foreground mx-1">|</span>{% endif %}
                  {% endfor %}
                </div>
              </td>
              {% endif %}
            </tr>
          </template>
          <tr x-show="tableLoading" class="border-b">
            <td colspan="{% if selectable %}{% if show_actions %}{{ col_count|add:2 }}{% else %}{{ col_count|add:1 }}{% endif %}{% else %}{% if show_actions %}{{ col_count|add:1 }}{% else %}{{ col_count }}{% endif %}{% endif %}" class="p-8 text-center text-muted-foreground">Loading…</td>
          </tr>
          <tr x-show="{{ rows_key }}.length === 0 && !tableLoading" class="border-b">
            <td colspan="{% if selectable %}{% if show_actions %}{{ col_count|add:2 }}{% else %}{{ col_count|add:1 }}{% endif %}{% else %}{% if show_actions %}{{ col_count|add:1 }}{% else %}{{ col_count }}{% endif %}{% endif %}" class="p-8 text-center text-muted-foreground">{{ empty_message|default:"No results." }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="flex items-center justify-between gap-4 px-2 py-3 mt-2 rounded-md border border-border bg-card text-sm text-muted-foreground">
      <span x-text="'Showing ' + (totalCount === 0 ? 0 : (currentPage - 1) * {{ page_size_key }} + 1) + '–' + Math.min(currentPage * {{ page_size_key }}, totalCount) + ' of ' + totalCount"></span>
      <div class="flex items-center gap-1">
        <button type="button" @click="firstPage()" :disabled="!hasPrev || tableLoading"
                class="h-8 px-2 rounded-md border border-input bg-background text-sm font-medium hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
                title="First page">«</button>
        <button type="button" @click="prevPage()" :disabled="!hasPrev || tableLoading"
                class="h-8 px-2 rounded-md border border-input bg-background text-sm font-medium hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
                title="Previous page">‹</button>
        <span class="h-8 px-3 flex items-center" x-text="'Page ' + currentPage + ' of ' + Math.max(1, Math.ceil(totalCount / {{ page_size_key }}))"></span>
        <button type="button" @click="nextPage()" :disabled="!hasNext || tableLoading"
                class="h-8 px-2 rounded-md border border-input bg-background text-sm font-medium hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
                title="Next page">›</button>
        <button type="button" @click="lastPage()" :disabled="!hasNext || tableLoading"
                class="h-8 px-2 rounded-md border border-input bg-background text-sm font-medium hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed"
                title="Last page">»</button>
      </div>
    </div>
  </c-card-content>
</c-card>
{% endwith %}