{{define "wishlist_form.html"}}{{template "base.html" .}}{{end}}
{{define "title"}}{{if .Wine}}Edit{{else}}New{{end}} Wishlist Wine - Cellar{{end}}
{{define "content"}}
  {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
  {{$w := .Wine}}
  <form method="POST" enctype="multipart/form-data"
    action="{{if $w}}/admin/wishlist/edit/{{$w.ShortID}}{{else}}/admin/wishlist/new{{end}}"
    class="form">

    <label for="image">image</label>
    <div class="image-upload-row">
      <input type="file" id="image" name="image" accept="image/*">
      {{if .HasAnthropicKey}}<button type="button" id="analyze-btn" onclick="analyzeImage()">analyze</button>{{end}}
    </div>

    <label for="name">name</label>
    <input type="text" id="name" name="name" required value="{{if $w}}{{$w.Name}}{{end}}">

    <label for="origin">origin</label>
    <input type="text" id="origin" name="origin" value="{{if $w}}{{$w.Origin}}{{end}}">

    <label for="grape">grape</label>
    <input type="text" id="grape" name="grape" value="{{if $w}}{{$w.Grape}}{{end}}">

    <label for="notes">notes</label>
    <textarea id="notes" name="notes" rows="5">{{if $w}}{{$w.Notes}}{{end}}</textarea>

    <label for="background">background</label>
    <textarea id="background" name="background" rows="5">{{if $w}}{{$w.Background}}{{end}}</textarea>

    <button type="submit">{{if $w}}update{{else}}create{{end}}</button>
  </form>

  <script>
    {{if .HasAnthropicKey}}
    async function analyzeImage() {
      var fileInput = document.getElementById('image');
      if (!fileInput.files.length) return;
      var formData = new FormData();
      formData.append('image', fileInput.files[0]);
      var btn = document.getElementById('analyze-btn');
      btn.textContent = 'analyzing...';
      btn.disabled = true;
      try {
        var res = await fetch('/admin/analyze-image', { method: 'POST', body: formData });
        if (res.ok) {
          var data = await res.json();
          if (data.name) document.getElementById('name').value = data.name;
          if (data.origin) document.getElementById('origin').value = data.origin;
          if (data.grape) document.getElementById('grape').value = data.grape;
          if (data.background) document.getElementById('background').value = data.background;
        }
      } catch (e) { console.error('Analysis failed:', e); }
      finally { btn.textContent = 'analyze'; btn.disabled = false; }
    }
    {{end}}
  </script>
{{end}}