{{define "tag-list"}}
{{if .}}
<div class="mt-4 overflow-hidden rounded-xl border border-stone-200 bg-white shadow-sm">
  <table class="w-full text-left text-sm">
    <thead class="bg-stone-50 text-stone-600">
      <tr>
        <th class="px-4 py-2 font-medium">Tag</th>
        <th class="px-4 py-2 font-medium">Status</th>
        <th class="px-4 py-2 font-medium">Item</th>
        <th class="px-4 py-2 font-medium"></th>
      </tr>
    </thead>
    <tbody>
      {{range .}}
      <tr class="border-t border-stone-100">
        <td class="px-4 py-2 font-mono text-xs">{{.TagCode}}</td>
        <td class="px-4 py-2">
          {{if eq .Status "active"}}<span class="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">Active</span>
          {{else if eq .Status "suspended"}}<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">Suspended</span>
          {{else if eq .Status "closed"}}<span class="rounded-full bg-stone-200 px-2 py-0.5 text-xs font-medium text-stone-500">Closed</span>
          {{else}}<span class="rounded-full bg-stone-200 px-2 py-0.5 text-xs font-medium text-stone-700">Unset</span>{{end}}
        </td>
        <td class="px-4 py-2">{{if .ItemType.Valid}}{{.ItemType.String}}{{else}}—{{end}}</td>
        <td class="px-4 py-2 text-right">
          {{if ne .Status "closed"}}
          <a href="/account/tags/{{.ID}}/edit" class="text-amber-600 hover:underline">Edit</a>
          {{end}}
          <form hx-post="/account/tags/{{.ID}}/close" hx-target="#account-panel" hx-swap="outerHTML" hx-confirm="Close this tag? It will stop alerts but keep its details." class="inline">
            <button class="ml-3 text-stone-500 hover:underline">Close</button>
          </form>
          <form hx-post="/account/tags/{{.ID}}/delete" hx-target="#account-panel" hx-swap="outerHTML" hx-confirm="Remove this tag from your account?" class="inline fade-row">
            <button class="ml-3 text-red-600 hover:underline">Remove</button>
          </form>
          <form hx-post="/account/tags/{{.ID}}/move" hx-target="#account-panel" hx-swap="outerHTML" class="inline" onsubmit="var c=prompt('Move details to which new tag code?'); if(!c)return false; this.querySelector('input').value=c;">
            <input type="hidden" name="new_tag_code" value="">
            <button class="ml-3 text-blue-600 hover:underline" type="submit">Move</button>
          </form>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{else}}
<p class="mt-6 text-center text-stone-500">No tags yet. Enter your tag code above to claim it.</p>
{{end}}
{{end}}