{{define "content"}}
<div class="mx-auto max-w-xl">
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold">Edit tag</h1>
    <a href="/account" class="text-sm text-stone-600 hover:underline">← My Tags</a>
  </div>
  <p class="mt-1 font-mono text-xs text-stone-500">Tag {{.Data.TagCode}}</p>

  {{if .Error}}<p class="mt-4 rounded bg-red-50 px-4 py-2 text-sm text-red-700 border border-red-200">{{.Error}}</p>{{end}}

  <form method="post" action="/account/tags/{{.Data.ID}}/edit" enctype="multipart/form-data" class="mt-6 space-y-4 rounded-xl border border-stone-200 bg-white p-6 shadow-sm">
    <div>
      <label class="block text-sm font-medium">Item type</label>
      <select name="item_type" class="mt-1 w-full rounded border border-stone-300 px-3 py-2">
        <option value="">Select…</option>
        <option value="dog" {{if eq .Data.ItemType.String "dog"}}selected{{end}}>Dog</option>
        <option value="cat" {{if eq .Data.ItemType.String "cat"}}selected{{end}}>Cat</option>
        <option value="baggage" {{if eq .Data.ItemType.String "baggage"}}selected{{end}}>Baggage</option>
        <option value="skis" {{if eq .Data.ItemType.String "skis"}}selected{{end}}>Skis</option>
        <option value="other" {{if eq .Data.ItemType.String "other"}}selected{{end}}>Other</option>
      </select>
    </div>
    <div>
      <label class="block text-sm font-medium">Description</label>
      <textarea name="description" rows="3" class="mt-1 w-full rounded border border-stone-300 px-3 py-2">{{if .Data.Description.Valid}}{{.Data.Description.String}}{{end}}</textarea>
    </div>
    <div>
      <label class="block text-sm font-medium">Photo</label>
      <div class="flex items-center gap-3">
        <img id="photo-preview" src="{{if .Data.PhotoUrl.Valid}}{{.Data.PhotoUrl.String}}?v={{.Data.UpdatedAt.Time.Unix}}{{end}}" alt="Photo" class="h-24 w-24 rounded-lg object-cover {{if not .Data.PhotoUrl.Valid}}hidden{{end}}">
        <div>
          <input type="file" name="photo" accept="image/*" class="text-sm" onchange="var f=this.files[0]; if(f){ var p=document.getElementById('photo-preview'); p.classList.remove('hidden'); var r=new FileReader(); r.onload=function(e){ p.src=e.target.result; }; r.readAsDataURL(f); }">
          <p class="mt-1 text-xs text-stone-500">Choose a photo and press Save. If you choose nothing, the current photo is kept.</p>
      <p class="mt-2"><a href="/t/{{.Data.TagCode}}?preview=1" target="_blank" rel="noopener" class="text-xs text-amber-600 hover:underline">👁 Preview the tag page (no scan)</a></p>
        </div>
      </div>
    </div>
    <div>
      <label class="block text-sm font-medium">Phone number (shown to finders)</label>
      <input name="phone" type="tel" value="{{if .Data.Phone.Valid}}{{.Data.Phone.String}}{{end}}" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" placeholder="+61…">
    </div>
    <div>
      <label class="block text-sm font-medium">Address</label>
      <input name="address" type="text" value="{{if .Data.Address.Valid}}{{.Data.Address.String}}{{end}}" class="mt-1 w-full rounded border border-stone-300 px-3 py-2">
    </div>
    <div>
      <label class="block text-sm font-medium">Notes</label>
      <textarea name="notes" rows="2" class="mt-1 w-full rounded border border-stone-300 px-3 py-2">{{if .Data.Notes.Valid}}{{.Data.Notes.String}}{{end}}</textarea>
    </div>
    <label class="flex items-center gap-2 text-sm">
      <input type="checkbox" name="sms_enabled" value="on" {{if .Data.SmsEnabled}}checked{{end}} class="h-4 w-4">
      Send me SMS alerts when this tag is scanned
    </label>
    <div class="flex gap-3">
      <button type="submit" class="rounded bg-stone-900 px-4 py-2 font-semibold text-white hover:bg-stone-700">Save details</button>
      <a href="/account" class="rounded border border-stone-300 px-4 py-2 text-sm font-medium hover:bg-stone-50">Cancel</a>
    </div>
  </form>

</div>
{{end}}