{{define "content"}}
<div class="mx-auto max-w-2xl">
  <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">📍 Location found</h1>
      <p class="mt-1 text-sm text-stone-300">Your Where Woof tag was scanned at {{.Data.ScannedAt}}. This is where it was reported:</p>
    </div>
    <div class="p-6">
      <div class="overflow-hidden rounded-lg border border-stone-200">
        <iframe
          title="Reported location"
          src="https://www.google.com/maps?q={{.Data.Lat}},{{.Data.Lng}}&amp;output=embed"
          class="h-72 w-full"
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>

      {{if .Data.FinderPhone}}
      <div class="mt-4 flex items-center justify-between rounded bg-green-50 px-4 py-3 border border-green-200">
        <dt class="font-medium text-sm">The finder left their number</dt>
        <dd><a href="tel:{{.Data.FinderPhone}}" class="font-semibold text-green-700 hover:underline">{{.Data.FinderPhone}}</a></dd>
      </div>
      {{end}}

      <p class="mt-4 text-center text-sm">
        <a href="/t/{{.Data.TagCode}}" class="text-amber-600 hover:underline">View this tag's return details</a>
      </p>
    </div>
  </div>
</div>
{{end}}