{% if links %}
<div class="overflow-x-auto">
  <table class="w-full text-sm" style="border-collapse: collapse;">
    <thead>
      <tr style="border-bottom: 1px solid var(--border-default);">
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Scan</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Scope</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Expires</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Views</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);"></th>
      </tr>
    </thead>
    <tbody>
      {% for link in links %}
      <tr style="border-bottom: 1px solid var(--border-default);">
        <td class="px-3 py-2" style="color: var(--text-primary);">{{ link.scan_id[:8] }}…</td>
        <td class="px-3 py-2" style="color: var(--text-secondary);">{{ link.scope }}</td>
        <td class="px-3 py-2" style="color: var(--text-secondary);">{{ link.expires_at }}</td>
        <td class="px-3 py-2" style="color: var(--text-secondary);">{{ link.access_count }}</td>
        <td class="px-3 py-2">
          <button hx-delete="/dashboard/projects/{{ project_id }}/shared-links/{{ link.token_hash }}"
                  hx-target="closest tr"
                  hx-swap="outerHTML"
                  hx-confirm="Revoke this shared link?"
                  class="text-xs px-2 py-1 rounded"
                  style="color: var(--cf-critical); border: 1px solid var(--cf-critical);">
            Revoke
          </button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="p-4 text-center text-sm" style="color: var(--text-muted);">
  No active shared links.
</div>
{% endif %}