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