{% extends "base.html" %}
{% from "_macros.html" import attachments_card %}

{% block title %}{% if mode=='new' %}Neue Mess-Vorlage{% else %}{{ tpl.name }}{% endif %}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/measurements" class="hover:underline">Messprotokolle</a> / {% if mode=='new' %}Neue Vorlage{% else %}{{ tpl.name }} bearbeiten{% endif %}</p>{% endblock %}
{% block heading %}{% if mode=='new' %}Neue Mess-Vorlage{% else %}{{ tpl.name }}{% endif %}{% endblock %}

{% block content %}

<form method="post" action="/measurements/templates/save" class="card max-w-4xl">
  {% if mode == 'edit' %}<input type="hidden" name="tid" value="{{ tpl.id }}">{% endif %}

  <div class="card-header"><div>
    <h2>Vorlage</h2>
    <p class="sub">Soll-Wert, Toleranz nach oben (+) und unten (−) je Maß</p>
  </div></div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Vorlage-Name *</label>
      <input class="input mt-1 w-full" type="text" name="name" required value="{{ tpl.name if tpl else '' }}"
             placeholder="z.B. Klemmsegment 4100-02">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Verknüpfter Artikel (optional)</label>
      <select class="select mt-1 w-full" name="item_id">
        <option value="">— ohne —</option>
        {% for it in items %}
          <option value="{{ it.id }}" {% if tpl and tpl.item_id == it.id %}selected{% endif %}>{{ it.ident }} — {{ it.description }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Beschreibung / Hinweis</label>
      <input class="input mt-1 w-full" type="text" name="description" value="{{ tpl.description if tpl else '' }}"
             placeholder="z.B. Erstmusterprüfung nach Zg. 4100-02 — alle Maße bei 20°C">
    </div>
  </div>

  <div class="card-header" style="border-top:1px solid #e5e5e5;">
    <div>
      <h2>Mess-Punkte</h2>
      <p class="sub">Maß-Bezeichnung · Soll · Toleranz oben (+) · Toleranz unten (−) · Einheit</p>
    </div>
    <button type="button" class="btn btn-secondary btn-sm" onclick="addPoint()">+ Maß hinzufügen</button>
  </div>
  <div id="points" class="p-5 space-y-3"></div>

  <div class="px-5 py-4 border-t border-neutral-100 flex items-center justify-between">
    <a class="btn btn-secondary" href="/measurements">Abbrechen</a>
    <button class="btn btn-primary" type="submit">{% if mode == 'new' %}Vorlage speichern{% else %}Änderungen speichern{% endif %}</button>
  </div>
</form>

{% if mode == 'edit' %}
<div class="max-w-4xl mt-6">
  {{ attachments_card(
       attachments,
       action_url="/measurements/templates/" ~ tpl.id ~ "/attachment",
       title="Zeichnungen &amp; Bilder",
       subtitle="Konstruktionszeichnungen, Skizzen, Referenzbilder zum Bauteil"
     ) }}
</div>

<form method="post" action="/measurements/templates/{{ tpl.id }}/delete" class="max-w-4xl mt-6"
      onsubmit="return confirm('Vorlage wirklich löschen? (Nur möglich, wenn keine Messungen damit erfasst wurden.)')">
  <button class="btn btn-danger btn-sm" type="submit">Vorlage löschen</button>
</form>
{% endif %}

<template id="row-template">
  <div class="point-row grid grid-cols-12 gap-2 items-end p-3 rounded border border-neutral-200">
    <div class="col-span-4">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Maß-Bezeichnung *</label>
      <input class="input mt-1 w-full" type="text" name="point___IDX___name" required placeholder="z.B. Durchmesser ø Bohrung">
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Soll</label>
      <input class="input mt-1 w-full nums" type="text" inputmode="decimal" name="point___IDX___nominal" value="0" required>
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Tol +</label>
      <input class="input mt-1 w-full nums" type="text" inputmode="decimal" name="point___IDX___tol_plus" value="0.05">
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Tol −</label>
      <input class="input mt-1 w-full nums" type="text" inputmode="decimal" name="point___IDX___tol_minus" value="-0.05">
    </div>
    <div class="col-span-1">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Einheit</label>
      <input class="input mt-1 w-full" type="text" name="point___IDX___unit" value="mm" placeholder="mm">
    </div>
    <div class="col-span-1 text-right">
      <button class="btn btn-sm btn-secondary" type="button" onclick="removePoint(this)" style="color:#dc2626;">✕</button>
    </div>
  </div>
</template>

<script>
let nextIdx = 0;
function addPoint(data) {
  const tpl = document.getElementById('row-template').innerHTML;
  const div = document.createElement('div');
  div.innerHTML = tpl.replaceAll('__IDX__', nextIdx);
  const row = div.firstElementChild;
  document.getElementById('points').appendChild(row);
  if (data) {
    row.querySelector(`[name=point_${nextIdx}_name]`).value      = data.name || '';
    row.querySelector(`[name=point_${nextIdx}_nominal]`).value   = data.nominal ?? 0;
    row.querySelector(`[name=point_${nextIdx}_tol_plus]`).value  = data.tol_plus ?? 0.05;
    row.querySelector(`[name=point_${nextIdx}_tol_minus]`).value = data.tol_minus ?? -0.05;
    row.querySelector(`[name=point_${nextIdx}_unit]`).value      = data.unit || 'mm';
  }
  nextIdx++;
}
function removePoint(btn) {
  btn.closest('.point-row').remove();
}

// Pre-fill existing points (edit mode)
{% if points is defined %}
const existingPoints = {{ points | tojson }};
existingPoints.forEach(p => addPoint(p));
{% else %}
addPoint();
{% endif %}
</script>
{% endblock %}