{{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}}