{{define "tag-edit-inline"}}
<tr class="border-t border-stone-100 bg-amber-50/50">
  <td colspan="4" class="px-4 py-3">
    <form hx-post="/account/tags/{{.ID}}/edit" hx-target="#account-panel" hx-swap="outerHTML" class="grid grid-cols-2 gap-2 text-sm">
      <div>
        <label class="block text-xs font-medium text-stone-600">Item type</label>
        <select name="item_type" class="mt-0.5 w-full rounded border border-stone-300 px-2 py-1">
          <option value="">Select…</option>
          <option value="dog" {{if eq .ItemType.String "dog"}}selected{{end}}>Dog</option>
          <option value="cat" {{if eq .ItemType.String "cat"}}selected{{end}}>Cat</option>
          <option value="baggage" {{if eq .ItemType.String "baggage"}}selected{{end}}>Baggage</option>
          <option value="skis" {{if eq .ItemType.String "skis"}}selected{{end}}>Skis</option>
          <option value="other" {{if eq .ItemType.String "other"}}selected{{end}}>Other</option>
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-stone-600">Description</label>
        <input name="description" type="text" value="{{if .Description.Valid}}{{.Description.String}}{{end}}" class="mt-0.5 w-full rounded border border-stone-300 px-2 py-1" placeholder="e.g. Shadow">
      </div>
      <div>
        <label class="block text-xs font-medium text-stone-600">Phone</label>
        <input name="phone" type="tel" value="{{if .Phone.Valid}}{{.Phone.String}}{{end}}" class="mt-0.5 w-full rounded border border-stone-300 px-2 py-1" placeholder="+61…">
      </div>
      <div>
        <label class="block text-xs font-medium text-stone-600">Address</label>
        <input name="address" type="text" value="{{if .Address.Valid}}{{.Address.String}}{{end}}" class="mt-0.5 w-full rounded border border-stone-300 px-2 py-1">
      </div>
      <div class="col-span-2">
        <label class="block text-xs font-medium text-stone-600">Notes</label>
        <textarea name="notes" rows="1" class="mt-0.5 w-full rounded border border-stone-300 px-2 py-1">{{if .Notes.Valid}}{{.Notes.String}}{{end}}</textarea>
      </div>
      <div class="col-span-2 flex items-center gap-3">
        {{if .PhotoUrl.Valid}}<img src="{{.PhotoUrl.String}}?v={{.UpdatedAt.Time.Unix}}" alt="Photo" class="h-10 w-10 rounded object-cover">{{end}}
        <form hx-encoding="multipart/form-data" hx-post="/account/tags/{{.ID}}/photo" hx-target="#account-panel" hx-swap="outerHTML" class="flex items-center gap-2">
          <input type="file" name="photo" accept="image/*" class="text-xs">
          <button class="rounded bg-stone-200 px-2 py-1 text-xs hover:bg-stone-300">Upload photo</button>
          <span class="htmx-indicator text-xs text-stone-400">Uploading…</span>
        </form>
        <div class="flex-1"></div>
        <label class="flex items-center gap-1.5 text-xs">
          <input type="checkbox" name="sms_enabled" value="on" {{if .SmsEnabled}}checked{{end}} class="h-3.5 w-3.5">
          SMS alerts
        </label>
        <div class="flex-1"></div>
        <span class="htmx-indicator text-xs text-stone-400">Saving…</span>
        <button type="submit" class="rounded bg-stone-900 px-3 py-1 text-xs font-semibold text-white hover:bg-stone-700">Save</button>
        <button type="button" hx-get="/account" hx-target="#account-panel" hx-swap="outerHTML" class="rounded border border-stone-300 px-3 py-1 text-xs hover:bg-stone-50">Cancel</button>
      </div>
    </form>
  </td>
</tr>
{{end}}