{{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">🎉 Your {{if .Data.ItemType}}{{.Data.ItemType}}{{else}}item{{end}} was found!</h1>
      <p class="mt-1 text-sm text-stone-300">It was reported at {{.Data.ScannedAt}}. Here's where it was seen:</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 border border-green-200 bg-green-50 px-4 py-3">
        <span class="text-sm font-medium">The finder left their number</span>
        <a href="tel:{{.Data.FinderPhone}}" class="font-semibold text-green-700 hover:underline">{{.Data.FinderPhone}}</a>
      </div>
      {{end}}

      {{if or .Data.PhotoURL .Data.Name .Data.Address .Data.Phone}}
      <div class="mt-4 rounded-xl border border-stone-200 p-4">
        <h2 class="font-bold">About your {{if .Data.ItemType}}{{.Data.ItemType}}{{else}}item{{end}}</h2>
        <div class="mt-2 flex gap-4">
          {{if .Data.PhotoURL}}<img src="{{.Data.PhotoURL}}?v={{.Data.UpdatedAt.Time.Unix}}" alt="Your item" class="h-28 w-28 rounded-lg object-cover">{{end}}
          <div class="text-sm">
            {{if .Data.Name}}<p class="font-medium">{{.Data.Name}}</p>{{end}}
            {{if .Data.Address}}<p class="text-stone-600">{{.Data.Address}}</p>{{end}}
            {{if .Data.Phone}}<p class="text-stone-600">Contact: <a href="tel:{{.Data.Phone}}" class="text-amber-600 hover:underline">{{.Data.Phone}}</a></p>{{end}}
          </div>
        </div>
      </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}}