{% macro sort_header(label, key, current_sort, current_order) %}
  {% if current_sort == key %}
    {% set next_order = "desc" if current_order == "asc" else "asc" %}
    {% set arrow = "↑" if current_order == "asc" else "↓" %}
  {% else %}
    {% set next_order = "asc" %}
    {% set arrow = "" %}
  {% endif %}
  <th>
    <a href="?sort={{ key }}&order={{ next_order }}"
       hx-get="?sort={{ key }}&order={{ next_order }}"
       hx-target="#credentials-list"
       hx-push-url="true">{{ label }}{% if arrow %} <span aria-hidden="true">{{ arrow }}</span>{% endif %}</a>
  </th>
{% endmacro %}

{% if credentials %}
<table class="list">
  <thead>
    <tr>
      {{ sort_header("Source", "source", sort, order) }}
      {{ sort_header("Type", "type", sort, order) }}
      {{ sort_header("ID", "id", sort, order) }}
      {{ sort_header("Owner", "owner", sort, order) }}
      <th>Scopes</th>
      {{ sort_header("Status", "status", sort, order) }}
    </tr>
  </thead>
  <tbody>
    {% for c in credentials %}
    <tr>
      <td>{{ c.source }}</td>
      <td class="mono">{{ c.credential_type }}</td>
      <td class="mono">
        <a href="/credentials/{{ c.source }}/{{ c.credential_id }}">{{ c.credential_id }}</a>
      </td>
      <td class="mono muted">{{ c.owner_id or "-" }}</td>
      <td>
        {% if c.scopes %}
          {% for s in c.scopes[:3] %}<span class="tag">{{ s }}</span>{% endfor %}
          {% if c.scopes|length > 3 %}<span class="tag muted">+{{ c.scopes|length - 3 }}</span>{% endif %}
        {% else %}
          <span class="muted">-</span>
        {% endif %}
      </td>
      <td>
        {% if c.is_active %}<span class="tag active">active</span>{% else %}<span class="tag inactive">inactive</span>{% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<div class="empty">No credentials match the current filters.</div>
{% endif %}