{{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" 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>
      {{if .Data.PhotoUrl.Valid}}<img src="{{.Data.PhotoUrl.String}}" alt="Current photo" class="mb-2 h-32 w-32 rounded-lg object-cover">{{end}}
      <input name="photo_url" type="url" value="{{if .Data.PhotoUrl.Valid}}{{.Data.PhotoUrl.String}}{{end}}" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" placeholder="https://… or upload below">
      <form hx-encoding="multipart/form-data" hx-post="/account/tags/{{.Data.ID}}/photo" hx-target="#upload-area" hx-swap="innerHTML" class="mt-2 flex gap-2" id="upload-area">
        <input type="file" name="photo" accept="image/*" class="text-sm">
        <button type="submit" class="rounded bg-stone-200 px-3 py-1 text-xs font-medium hover:bg-stone-300">Upload</button>
        <span class="htmx-indicator self-center text-xs text-stone-400">Uploading…</span>
      </form>
      <p class="mt-1 text-xs text-stone-500">Upload a photo, or paste a URL above.</p>
    </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}}