{{define "content"}}
<div class="mx-auto max-w-2xl">
  {{if eq .Data.Status "unset"}}
    <div class="rounded-xl border border-stone-200 bg-white p-8 text-center shadow-sm">
      <div class="text-5xl">🏷️</div>
      <h1 class="mt-4 text-2xl font-bold">This tag isn't set up yet</h1>
      <p class="mt-2 text-stone-600">This WhereWoof tag hasn't been claimed. If this is your tag, log in and add it to your account to set up the return details.</p>
      <div class="mt-6 flex justify-center gap-3">
        <a href="/login" class="rounded bg-stone-900 px-4 py-2 text-sm font-semibold text-white hover:bg-stone-700">Log in</a>
        <a href="/register" class="rounded bg-amber-500 px-4 py-2 text-sm font-semibold text-stone-900 hover:bg-amber-400">Create account</a>
      </div>
    </div>
  {{else if eq .Data.Status "suspended"}}
    <div class="rounded-xl border border-stone-200 bg-white p-8 text-center shadow-sm">
      <div class="text-5xl">🚫</div>
      <h1 class="mt-4 text-2xl font-bold">This tag is unavailable</h1>
      <p class="mt-2 text-stone-600">The owner has disabled this tag. Please try another way to return the item.</p>
    </div>
  {{else}}
    <div class="overflow-hidden rounded-xl border border-stone-200 bg-white shadow-sm">
      <div class="bg-stone-900 px-6 py-5 text-white">
        <h1 class="text-2xl font-bold">
          {{if .Data.ItemType.Valid}}{{.Data.ItemType.String | title}}{{else}}Item{{end}} — found!
        </h1>
        <p class="mt-1 text-sm text-stone-300">This item has a WhereWoof tag. Here's how to return it:</p>
      </div>
      <div class="p-6">
        {{if .Data.PhotoUrl.Valid}}
        <img src="{{.Data.PhotoUrl.String}}" alt="Item photo" class="mb-4 h-56 w-full rounded-lg object-cover">
        {{end}}
        {{if .Data.Description.Valid}}
        <p class="text-stone-700">{{.Data.Description.String}}</p>
        {{end}}
        <dl class="mt-4 space-y-2 text-sm">
          {{if .Data.Phone.Valid}}
          <div class="flex items-center justify-between rounded bg-stone-50 px-4 py-3">
            <dt class="font-medium">Call the owner</dt>
            <dd><a href="tel:{{.Data.Phone.String}}" class="font-semibold text-amber-600 hover:underline">{{.Data.Phone.String}}</a></dd>
          </div>
          {{end}}
          {{if .Data.Address.Valid}}
          <div class="flex items-center justify-between rounded bg-stone-50 px-4 py-3">
            <dt class="font-medium">Return to</dt>
            <dd class="text-right">{{.Data.Address.String}}</dd>
          </div>
          {{end}}
          {{if .Data.Notes.Valid}}
          <div class="rounded bg-stone-50 px-4 py-3">
            <dt class="font-medium">Notes</dt>
            <dd class="mt-1 text-stone-600">{{.Data.Notes.String}}</dd>
          </div>
          {{end}}
        </dl>
        <p class="mt-6 rounded bg-amber-50 px-4 py-3 text-sm text-amber-800 border border-amber-200">
          Found this item? Please contact the owner to arrange the return. Thank you for helping!
        </p>
        {{if .Data.IsOwner}}
        <p class="mt-4 text-center text-sm"><a href="/account/tags/{{.Data.ID}}/edit" class="text-amber-600 hover:underline">✏️ Edit this tag's details</a></p>
        {{end}}
      </div>
    </div>
  {{end}}
</div>
{{end}}