{{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">
        {{if .Data.Authed}}
        <a href="/account?code={{.Data.TagCode}}" class="rounded bg-stone-900 px-4 py-2 text-sm font-semibold text-white hover:bg-stone-700">➕ Add this tag to my account</a>
        {{else}}
        <a href="/login?next=/account?code={{.Data.TagCode}}" 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>
        {{end}}
      </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 if eq .Data.Status "closed"}}
    <div class="mx-auto max-w-xl 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 has been closed</h1>
      <p class="mt-2 text-stone-600">This Where Woof tag is no longer active — its owner has retired it (maybe a broken tag, a new tag, or the item was found and the tag removed).</p>
      <p class="mt-2 text-sm text-stone-500">If you found this item, please try to return it another way (ask around, check lost &amp; found, or contact local authorities).</p>
      <div class="mt-6 flex justify-center gap-3">
        <a href="/" class="rounded bg-stone-900 px-4 py-2 text-sm font-semibold text-white hover:bg-stone-700">Where Woof home</a>
        <a href="/what-is-this" class="rounded border border-stone-300 px-4 py-2 text-sm font-medium hover:bg-stone-50">What is this?</a>
      </div>
    </div>
  {{else}}
    <div class="overflow-hidden rounded-xl border border-stone-200 bg-white shadow-sm">
      {{if .Data.Preview}}
        <div class="bg-amber-400 px-6 py-2 text-center text-xs font-bold text-stone-900">👁 PREVIEW — this is how the page looks to a finder (scan functionality disabled)</div>
        {{end}}
        <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}}?v={{.Data.UpdatedAt.Time.Unix}}" alt="Item photo" class="mb-4 w-full rounded-lg object-cover" style="aspect-ratio: 3 / 4;">
        {{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" x-data="{ p: '' }">
            <dt class="font-medium">Text the owner</dt>
            <dd>
              <a :href="'sms:' + '{{.Data.Phone.String}}' + '?&body=' + encodeURIComponent('Hi! I found your {{if .Data.ItemType.Valid}}{{.Data.ItemType.String}}{{else}}item{{end}}{{if .Data.Description.Valid}}, {{.Data.Description.String}}{{end}}. My number is: ') + (p ? p : '___')"
                 class="font-semibold text-amber-600 hover:underline">Send an SMS</a>
              <input x-model="p" type="tel" placeholder="Add your number to include it" class="mt-1 w-44 rounded border border-stone-300 px-2 py-1 text-xs">
            </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>

        {{if not .Data.Preview}}
        <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>
          <p id="location-shared" class="hidden mt-2 text-xs font-medium text-green-700">✓ Location shared — the owner has been sent a map link.</p>
        </div>
        {{end}}

        {{if not .Data.Preview}}
        <div id="contact-area" class="mt-4" x-data="{ phone: '', get valid() { return /^[0-9+ ]{8,16}$/.test(this.phone.trim()); } }">
          <form hx-post="/t/{{.Data.TagCode}}/contact" hx-target="#contact-area" hx-swap="innerHTML" class="flex gap-2" @submit.prevent="if(!valid) return; $el.requestSubmit()">
            <input type="hidden" name="fingerprint" value="">
            <input name="phone" type="tel" placeholder="Leave your number for the owner (optional)" class="flex-1 rounded border px-3 py-2 text-sm" :class="phone && !valid ? 'border-red-400' : 'border-stone-300'" pattern="[0-9+ ]{8,16}" x-model="phone">
            <button type="submit" class="rounded bg-stone-900 px-4 py-2 text-sm font-semibold text-white hover:bg-stone-700" :disabled="phone && !valid">Send number</button>
            <span class="htmx-indicator self-center text-xs text-stone-400">Sending…</span>
          </form>
          <p x-show="phone && !valid" class="mt-1 text-xs text-red-600">Enter a valid phone number (8–16 digits, e.g. 0423 274 487).</p>
        </div>
        {{end}}

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

    {{if not .Data.Preview}}
    <script>
      (function () {
        var code = {{.Data.TagCode | printf "%q"}};
        var btn = document.getElementById("recheck-btn");
        // Lightweight anti-spam fingerprint (UA/language/timezone/screen/platform hash).
        function fingerprint() {
          var parts = [navigator.userAgent, navigator.language, new Date().getTimezoneOffset(),
            screen.width + "x" + screen.height, navigator.platform || "", navigator.hardwareConcurrency || ""];
          return parts.join("|").split("").reduce(function (h, c) {
            return ((h << 5) - h + c.charCodeAt(0)) | 0;
          }, 0).toString(36);
        }
        var fp = fingerprint();
        var fpInput = document.querySelector('input[name="fingerprint"]');
        if (fpInput) fpInput.value = fp;
        function sendScan(lat, lng) {
          var body = {fingerprint: fp};
          if (lat != null) { body.lat = lat; body.lng = lng; }
          fetch("/t/" + code + "/scan", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(body)
          });
        }
        function tryLocation() {
          if (!navigator.geolocation) { sendScan(null, null); return; }
          navigator.geolocation.getCurrentPosition(
            function (pos) {
              // Location approved: hide the button permanently and send coords.
              if (btn) { btn.classList.add("hidden"); btn.disabled = true; }
              var shared = document.getElementById("location-shared");
              if (shared) shared.classList.remove("hidden");
              sendScan(pos.coords.latitude, pos.coords.longitude);
            },
            function () {
              sendScan(null, null); // no location — page still works, button stays
            },
            {timeout: 8000, maximumAge: 0}
          );
        }
        // Location-first: send coords when the finder approves. If the prompt is
        // denied, unsupported, or silently blocked (8s), fall back to a plain scan
        // so every tag view still reports.
        if (btn) btn.addEventListener("click", tryLocation);
        tryLocation();
      })();
    </script>
    {{end}}
  {{end}}
</div>
{{end}}