{{define "wine_form.html"}}{{template "base.html" .}}{{end}}
{{define "title"}}{{if .Wine}}Edit{{else}}New{{end}} 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/edit/{{$w.ShortID}}{{else}}/admin/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>

    <div class="score-group">
      <div class="score-section-label">appearance</div>
      <div class="score-row">
        <label for="clarity">clarity</label>
        <input type="range" id="clarity" name="clarity" min="1" max="5" value="{{if $w}}{{$w.Clarity}}{{else}}3{{end}}">
        <span class="score-value" data-for="clarity">{{if $w}}{{$w.Clarity}}{{else}}3{{end}}</span>
      </div>
      <div class="score-row">
        <label for="color_intensity">intensity</label>
        <input type="range" id="color_intensity" name="color_intensity" min="1" max="5" value="{{if $w}}{{$w.ColorIntensity}}{{else}}3{{end}}">
        <span class="score-value" data-for="color_intensity">{{if $w}}{{$w.ColorIntensity}}{{else}}3{{end}}</span>
      </div>

      <div class="score-section-label">nose</div>
      <div class="score-row">
        <label for="aroma_intensity">aroma</label>
        <input type="range" id="aroma_intensity" name="aroma_intensity" min="1" max="5" value="{{if $w}}{{$w.AromaIntensity}}{{else}}3{{end}}">
        <span class="score-value" data-for="aroma_intensity">{{if $w}}{{$w.AromaIntensity}}{{else}}3{{end}}</span>
      </div>
      <div class="score-row">
        <label for="nose_complexity">complexity</label>
        <input type="range" id="nose_complexity" name="nose_complexity" min="1" max="5" value="{{if $w}}{{$w.NoseComplexity}}{{else}}3{{end}}">
        <span class="score-value" data-for="nose_complexity">{{if $w}}{{$w.NoseComplexity}}{{else}}3{{end}}</span>
      </div>

      <div class="score-section-label">palate</div>
      <div class="score-row">
        <label for="sweetness">sweetness</label>
        <input type="range" id="sweetness" name="sweetness" min="1" max="5" value="{{if $w}}{{$w.Sweetness}}{{else}}3{{end}}">
        <span class="score-value" data-for="sweetness">{{if $w}}{{$w.Sweetness}}{{else}}3{{end}}</span>
      </div>
      <div class="score-row">
        <label for="acidity">acidity</label>
        <input type="range" id="acidity" name="acidity" min="1" max="5" value="{{if $w}}{{$w.Acidity}}{{else}}3{{end}}">
        <span class="score-value" data-for="acidity">{{if $w}}{{$w.Acidity}}{{else}}3{{end}}</span>
      </div>
      <div class="score-row">
        <label for="tannin">tannin</label>
        <input type="range" id="tannin" name="tannin" min="1" max="5" value="{{if $w}}{{$w.Tannin}}{{else}}3{{end}}">
        <span class="score-value" data-for="tannin">{{if $w}}{{$w.Tannin}}{{else}}3{{end}}</span>
      </div>
      <div class="score-row">
        <label for="alcohol">alcohol</label>
        <input type="range" id="alcohol" name="alcohol" min="1" max="5" value="{{if $w}}{{$w.Alcohol}}{{else}}3{{end}}">
        <span class="score-value" data-for="alcohol">{{if $w}}{{$w.Alcohol}}{{else}}3{{end}}</span>
      </div>
      <div class="score-row">
        <label for="body">body</label>
        <input type="range" id="body" name="body" min="1" max="5" value="{{if $w}}{{$w.Body}}{{else}}3{{end}}">
        <span class="score-value" data-for="body">{{if $w}}{{$w.Body}}{{else}}3{{end}}</span>
      </div>
    </div>

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

  <script>
    document.querySelectorAll('input[type="range"]').forEach(function(input) {
      input.addEventListener('input', function() {
        var span = document.querySelector('.score-value[data-for="' + this.id + '"]');
        if (span) span.textContent = this.value;
      });
    });

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