{{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 Where Woof 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 Where Woof 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>
          <div class="flex items-center justify-between rounded bg-stone-50 px-4 py-3">
            <dt class="font-medium">Text the owner</dt>
            <dd><a href="sms:{{.Data.Phone.String}}?&body=Hi! I found your {{if .Data.ItemType.Valid}}{{.Data.ItemType.String}}{{else}}item{{end}}{{if .Data.Description.Valid}}, {{.Data.Description.String}}{{end}}. My phone number is: " class="font-semibold text-amber-600 hover:underline">Send an SMS</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>

        <div class="mt-4 rounded border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
          <p><strong>Help the owner find it:</strong> sharing your location sends them a map link. No location? No problem — the page still works.</p>
          <button id="recheck-btn" type="button" class="mt-2 rounded bg-amber-500 px-3 py-1.5 text-xs font-semibold text-stone-900 hover:bg-amber-400">📍 Re-check my location</button>
        </div>

        <div id="contact-area" class="mt-4">
          <form hx-post="/t/{{.Data.TagCode}}/contact" hx-target="#contact-area" hx-swap="innerHTML" class="flex gap-2">
            <input name="phone" type="tel" placeholder="Leave your number for the owner (optional)" class="flex-1 rounded border border-stone-300 px-3 py-2 text-sm" pattern="[0-9+ ]{8,16}">
            <button type="submit" class="rounded bg-stone-900 px-4 py-2 text-sm font-semibold text-white hover:bg-stone-700">Send number</button>
          </form>
        </div>

        {{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>

    <script>
      (function () {
        var code = {{.Data.TagCode | printf "%q"}};
        var btn = document.getElementById("recheck-btn");
        function sendScan(lat, lng) {
          fetch("/t/" + code + "/scan", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(lat != null ? {lat: lat, lng: lng} : {})
          });
        }
        function tryLocation() {
          if (!navigator.geolocation) { sendScan(null, null); return; }
          navigator.geolocation.getCurrentPosition(
            function (pos) {
              if (btn) btn.classList.add("hidden");
              sendScan(pos.coords.latitude, pos.coords.longitude);
            },
            function () { sendScan(null, null); },
            {timeout: 8000, maximumAge: 60000}
          );
        }
        if (btn) btn.addEventListener("click", tryLocation);
        tryLocation();
      })();
    </script>
  {{end}}
</div>
{{end}}