{% extends 'admin/layout.html.twig' %}
{% block page_title %}{{ title }}{% endblock %}
{% block breadcrumb %}
  <span class="sep">/</span><a href="{{ path('admin_csiwo_index') }}" class="breadcrumb-link">CSIWO</a>
  <span class="sep">/</span><a href="{{ path('admin_map_index') }}" class="breadcrumb-link">Cartes</a>
  <span class="sep">/</span><a href="{{ path('admin_map_zone_index', {mapId: map.id}) }}" class="breadcrumb-link">{{ map.name }}</a>
  <span class="sep">/</span><span class="breadcrumb-text">{{ title }}</span>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .zone-editor-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
  .editor-canvas-wrap { position: relative; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: #000; max-height: 85vh; }
  #mapImg { display: block; max-width: none; }
  #zoneCanvas { display: block; cursor: crosshair; }
  @media (max-width: 900px) { .zone-editor-layout { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block content %}
{% set allZonesJson = allZones|map(z => {
  id: z.id,
  name: z.name,
  type: z.type,
  x: z.x,
  y: z.y,
  width: z.width,
  height: z.height
})|json_encode %}

<form method="post" action="{{ action }}" id="zoneForm">

  <div class="zone-editor-layout">

    {# ── Left: form fields ── #}
    <div>
      <div class="section">
        <div class="section-title">Général</div>
        <div style="display:flex;flex-direction:column;gap:12px">
          <div class="field">
            <label class="field-label" for="name">Nom *</label>
            <input type="text" name="name" id="name" required value="{{ zone.name }}">
          </div>
          <div class="field">
            <label class="field-label" for="slug">Slug *</label>
            <input type="text" name="slug" id="slug" required value="{{ zone.slug }}"
                   pattern="[a-z0-9\-]+" title="Minuscules, chiffres et tirets uniquement">
          </div>
          <div class="field">
            <label class="field-label" for="type">Type *</label>
            <select name="type" id="type">
              {% for t in zoneTypes %}
                <option value="{{ t }}" {{ zone.type == t ? 'selected' }}>{{ t }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field">
            <label class="field-label">Options</label>
            <label class="checkbox-item" style="margin-top:4px">
              <input type="checkbox" name="isActive" value="1" {{ zone.active ? 'checked' }}>
              Zone active
            </label>
          </div>
          <div class="field" style="margin-top:8px">
            <label class="field-label">Accès minimum requis</label>
            <select name="minSubscriptionTier" style="max-width:220px">
              <option value="">Aucun (zone libre)</option>
              <option value="bronze"  {{ zone.minSubscriptionTier == 'bronze'  ? 'selected' }}>Bronze (ou plus)</option>
              <option value="argent"  {{ zone.minSubscriptionTier == 'argent'  ? 'selected' }}>Argent (ou plus)</option>
              <option value="gold"    {{ zone.minSubscriptionTier == 'gold'    ? 'selected' }}>Gold (ou plus)</option>
              <option value="platine" {{ zone.minSubscriptionTier == 'platine' ? 'selected' }}>Platine uniquement</option>
            </select>
          </div>
          <div class="grid-2">
            <div class="field">
              <label class="field-label" for="sortOrder">Ordre d'affichage</label>
              <input type="number" name="sortOrder" id="sortOrder" value="{{ zone.sortOrder }}" min="0">
            </div>
            <div class="field">
              <label class="field-label" for="requiredLevel">Niveau requis</label>
              <input type="number" name="requiredLevel" id="requiredLevel"
                     value="{{ zone.requiredLevel ?? '' }}" min="1" placeholder="Aucun">
            </div>
          </div>
          <div class="field">
            <label class="field-label" for="description">Description</label>
            <textarea name="description" id="description" rows="3">{{ zone.description }}</textarea>
          </div>
          <div class="field" id="fieldDialog">
            <label class="field-label" for="onClickDialogId">Dialogue au clic</label>
            <select name="onClickDialogId" id="onClickDialogId">
              <option value="">— Aucun —</option>
              {% for dialog in dialogs %}
                <option value="{{ dialog.id }}" {{ zone.onClickDialog and zone.onClickDialog.id == dialog.id ? 'selected' }}>
                  {{ dialog.name }}
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="field" id="fieldEventFunction">
            <label class="field-label" for="eventFunction">Fonction déclenchée</label>
            <select name="eventFunction" id="eventFunction">
              <option value="">— Aucune —</option>
              {% for key, label in eventFunctions %}
                <option value="{{ key }}" {{ zone.eventFunction == key ? 'selected' }}>{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field" id="fieldPopupText">
            <label class="field-label" for="popupText">Texte de la fenêtre de confirmation</label>
            <textarea name="popupText" id="popupText" rows="4"
                      placeholder="Ex. : Un puits de lumière céleste irradie ici. Souhaitez-vous vous y baigner ?">{{ zone.popupText }}</textarea>
            <p style="font-size:.75rem;color:var(--muted);margin-top:4px">Affiché dans la popup avant de déclencher l'événement. Laissez vide pour confirmer sans popup.</p>
          </div>
          <div class="field" id="fieldQuest">
            <label class="field-label" for="onClickQuestId">Quête unique à déclencher</label>
            <select name="onClickQuestId" id="onClickQuestId">
              <option value="">— Aucune —</option>
              {% for quest in quests %}
                <option value="{{ quest.id }}" {{ zone.onClickQuest and zone.onClickQuest.id == quest.id ? 'selected' }}>
                  {{ quest.name }}
                </option>
              {% endfor %}
            </select>
            <p style="font-size:.75rem;color:var(--muted);margin-top:4px">Pour une zone proposant une seule quête. Incompatible avec la séquence ci-dessous.</p>
          </div>
          <div class="field" id="fieldQuestSequence">
            <label class="field-label" for="onClickQuests">Séquence de quêtes (PNJ multi-quêtes)</label>
            <input type="text" name="onClickQuests" id="onClickQuests"
                   value="{{ zone.onClickQuests ? zone.onClickQuests|join(',') : '' }}"
                   placeholder="ex: 3,7,12">
            <p style="font-size:.75rem;color:var(--muted);margin-top:4px">
              IDs séparés par des virgules, dans l'ordre. Le joueur se voit proposer la première quête disponible (preConditions satisfaites, pas encore acceptée).
              Utiliser <code>quest_complete</code> dans les preConditions pour imposer l'ordre. Prioritaire sur "Quête unique" si renseigné.
            </p>
          </div>
          <div class="field" id="fieldTransport">
            <label class="field-label" for="transportTargetId">Zone de destination (transport)</label>
            <select name="transportTargetId" id="transportTargetId">
              <option value="">— Aucune —</option>
              {% for z in allZones %}
                {% if z.id != zone.id %}
                  <option value="{{ z.id }}" {{ zone.transportTarget and zone.transportTarget.id == z.id ? 'selected' }}>
                    {{ z.map.name }} / {{ z.name }}
                  </option>
                {% endif %}
              {% endfor %}
            </select>
            <p style="font-size:.75rem;color:var(--muted);margin-top:4px">Téléporte immédiatement le joueur vers cette zone au clic.</p>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Coordonnées (pixels naturels)</div>
        <div class="grid-2" style="gap:10px">
          <div class="field">
            <label class="field-label" for="fx">X</label>
            <input type="number" name="x" id="fx" value="{{ zone.x }}" min="0">
          </div>
          <div class="field">
            <label class="field-label" for="fy">Y</label>
            <input type="number" name="y" id="fy" value="{{ zone.y }}" min="0">
          </div>
          <div class="field">
            <label class="field-label" for="fw">Largeur</label>
            <input type="number" name="width" id="fw" value="{{ zone.width }}" min="1">
          </div>
          <div class="field">
            <label class="field-label" for="fh">Hauteur</label>
            <input type="number" name="height" id="fh" value="{{ zone.height }}" min="1">
          </div>
        </div>
        <p style="font-size:.75em;color:var(--muted);margin-top:8px">
          Ou dessinez directement sur la carte à droite.
        </p>
      </div>

      <div class="section" id="fieldSection" style="display:none">
        <div class="section-title">Ennemis de la zone</div>
        <div class="field" style="margin-bottom:10px">
          <label class="field-label" for="fieldRenewalMinutes">Renouvellement (minutes)</label>
          <input type="number" name="fieldRenewalMinutes" id="fieldRenewalMinutes"
                 min="1" value="{{ zone.fieldRenewalMinutes ?? 30 }}" style="max-width:120px">
        </div>
        <input type="text" id="fieldEnemySearch" placeholder="Filtrer…"
               style="width:100%;margin-bottom:10px;padding:6px 8px;background:var(--input-bg,#161b22);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem">
        {% if fieldEnemies|length > 0 %}
          <div class="shop-check-list" style="display:flex;flex-direction:column;gap:3px;max-height:220px;overflow-y:auto;padding-right:4px">
            {% for enemy in fieldEnemies %}
              <label class="field-enemy-item checkbox-item" data-name="{{ enemy.name|lower }}"
                     style="display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:4px;cursor:pointer;font-size:.82rem">
                <input type="checkbox" name="fieldEnemies[]"
                       value="{{ enemy.id }}"
                       {{ zone.isFieldEnemySelected(enemy.id) ? 'checked' }}>
                {{ enemy.name }}{% if enemy.isBoss %} ★{% endif %}{% if enemy.isSuperboss %} ★★{% endif %}
              </label>
            {% endfor %}
          </div>
        {% else %}
          <p style="color:var(--muted);font-size:.82rem">Aucun ennemi MMO créé pour l'instant.</p>
        {% endif %}
      </div>

      <div class="section" id="shopSection" style="display:none">
        <div class="section-title">Articles en vente</div>
        <input type="text" id="shopSearch" placeholder="Filtrer…"
               style="width:100%;margin-bottom:10px;padding:6px 8px;background:var(--input-bg,#161b22);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem">

        {% set shopGroups = [
          {label: 'Armes',   key: 'weapon', items: shopWeapons},
          {label: 'Armures', key: 'armor',  items: shopArmors},
          {label: 'Objets',  key: 'item',   items: shopItems}
        ] %}
        {% for group in shopGroups %}
          {% if group.items|length > 0 %}
            <div class="shop-group" style="margin-bottom:12px">
              <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px">
                {{ group.label }} ({{ group.items|length }})
              </div>
              <div class="shop-check-list" style="display:flex;flex-direction:column;gap:3px;max-height:180px;overflow-y:auto;padding-right:4px">
                {% for item in group.items %}
                  <label class="shop-item checkbox-item" data-name="{{ item.name|lower }}"
                         style="display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:4px;cursor:pointer;font-size:.82rem">
                    <input type="checkbox" name="shopItems[]"
                           value="{{ group.key }}:{{ item.id }}"
                           {{ zone.isShopItemSelected(group.key, item.id) ? 'checked' }}>
                    {{ item.name }}
                  </label>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>

      <div class="section" id="craftSection" style="display:none">
        <div class="section-title">Atelier de craft</div>
        <div class="field-label" style="margin-bottom:8px">Types de recettes affichées dans cette zone</div>
        <div style="display:flex;gap:16px;flex-wrap:wrap">
          {% for typeKey, typeLabel in {item: 'Objets (ItemMmo)', weapon: 'Armes (base)', armor: 'Armures (base)'} %}
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.86rem">
              <input type="checkbox" name="craftTypes[]" value="{{ typeKey }}"
                     {{ zone.craftTypes is null or typeKey in (zone.craftTypes ?? []) ? 'checked' }}>
              {{ typeLabel }}
            </label>
          {% endfor %}
        </div>
        <div style="font-size:.74rem;color:var(--muted);margin-top:6px">Si aucune case cochée, tous les types sont affichés.</div>
      </div>

      <div class="section" id="questBoardSection" style="display:none">
        <div class="section-title">Tableau de quêtes</div>
        <div class="field">
          <label class="field-label">Scope (location filtrée)</label>
          <input type="text" name="questBoardScope" value="{{ zone.questBoardScope ?? '' }}" placeholder="ex: Saint-Roc" style="max-width:280px">
          <div style="font-size:.74rem;color:var(--muted);margin-top:6px">
            Affiche les quêtes dont <code>location</code> matche cette valeur. Convention : une quête a un seul lieu d'apparition (soit un PNJ via <em>quêtes au clic</em>, soit un tableau via son <em>location</em>, jamais les deux).
          </div>
        </div>
      </div>

      <div class="section" id="gatherSection" style="display:none">
        <div class="section-title">Ressources récoltables</div>
        <div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px">
          <div class="field">
            <label class="field-label">Renouvellement (minutes)</label>
            <input type="number" name="gatherRenewalMinutes" min="1"
                   value="{{ zone.gatherRenewalMinutes ?? 10 }}" style="max-width:120px">
          </div>
          <div class="field">
            <label class="field-label">Utilisations max par période</label>
            <input type="number" name="gatherMaxUses" min="1"
                   value="{{ zone.gatherMaxUses ?? 1 }}" style="max-width:120px">
          </div>
        </div>
        <div id="gatherRowsContainer" style="display:flex;flex-direction:column;gap:6px;margin-bottom:8px"></div>
        <button type="button" class="btn btn-outline btn-sm" onclick="gatherAddRow()">+ Ajouter une ressource</button>
      </div>

      <div class="form-actions" style="margin-top:0">
        <button type="submit" class="btn btn-primary">Enregistrer</button>
        <a href="{{ path('admin_map_zone_index', {mapId: map.id}) }}" class="btn btn-cancel">Annuler</a>
      </div>
    </div>

    {# ── Right: visual editor ── #}
    <div>
      <div class="section">
        <div class="section-title">Éditeur visuel — {{ map.name }}</div>
        {% if map.filename %}
          <div class="editor-canvas-wrap">
            <img id="mapImg" src="{{ asset('uploads/maps/' ~ map.filename) }}"
                 alt="{{ map.name }}">
            <canvas id="zoneCanvas"
                    data-zones="{{ allZonesJson }}"
                    data-current-id="{{ zone.id ?? '' }}"
                    style="position:absolute;top:0;left:0"></canvas>
          </div>
          <p style="font-size:.75em;color:var(--muted);margin-top:6px">
            Cliquez et faites glisser pour dessiner une zone. Les autres zones sont affichées en surimpression.
          </p>
        {% else %}
          <p style="color:var(--muted);font-style:italic">Aucune image configurée pour cette carte.</p>
        {% endif %}
      </div>
    </div>

  </div>
</form>

<script>
(function () {
  /* ── Field visibility by type ── */
  var typeElV = document.getElementById('type');
  var fieldDialog        = document.getElementById('fieldDialog');
  var fieldQuest         = document.getElementById('fieldQuest');
  var fieldTransport     = document.getElementById('fieldTransport');
  var fieldEventFunction = document.getElementById('fieldEventFunction');
  var fieldPopupText     = document.getElementById('fieldPopupText');
  var shopSection        = document.getElementById('shopSection');
  var fieldSection       = document.getElementById('fieldSection');
  var gatherSection      = document.getElementById('gatherSection');
  var craftSection       = document.getElementById('craftSection');
  var questBoardSection  = document.getElementById('questBoardSection');

  function updateEventFields() {
    var t = typeElV ? typeElV.value : '';
    var isEvent  = t === 'event';
    var isShop   = t === 'shop';
    var isField  = t === 'field';
    var isGather = t === 'gather';
    var isCraft  = t === 'craft';
    var isBoard  = t === 'quest_board';
    if (fieldEventFunction) fieldEventFunction.style.display = isEvent  ? '' : 'none';
    if (fieldPopupText)     fieldPopupText.style.display     = isEvent  ? '' : 'none';
    if (fieldQuest)         fieldQuest.style.display         = isEvent  ? '' : 'none';
    if (fieldTransport)     fieldTransport.style.display     = isEvent  ? '' : 'none';
    if (shopSection)        shopSection.style.display        = isShop   ? '' : 'none';
    if (fieldSection)       fieldSection.style.display       = isField  ? '' : 'none';
    if (gatherSection)      gatherSection.style.display      = isGather ? '' : 'none';
    if (craftSection)       craftSection.style.display       = isCraft  ? '' : 'none';
    if (questBoardSection)  questBoardSection.style.display  = isBoard  ? '' : 'none';
  }
  if (typeElV) {
    typeElV.addEventListener('change', updateEventFields);
    updateEventFields();
  }

  /* ── Shop item filter ── */
  var shopSearch = document.getElementById('shopSearch');
  if (shopSearch) {
    shopSearch.addEventListener('input', function () {
      var q = shopSearch.value.toLowerCase();
      document.querySelectorAll('.shop-item').forEach(function (el) {
        el.style.display = el.dataset.name.includes(q) ? '' : 'none';
      });
    });
  }

  /* ── Field enemy filter ── */
  var fieldEnemySearch = document.getElementById('fieldEnemySearch');
  if (fieldEnemySearch) {
    fieldEnemySearch.addEventListener('input', function () {
      var q = fieldEnemySearch.value.toLowerCase();
      document.querySelectorAll('.field-enemy-item').forEach(function (el) {
        el.style.display = el.dataset.name.includes(q) ? '' : 'none';
      });
    });
  }

  /* ── Slug auto-generation ── */
  var nameEl = document.getElementById('name');
  var slugEl = document.getElementById('slug');
  var slugEdited = slugEl.value !== '';

  function toSlug(s) {
    return s.normalize('NFD').replace(/[̀-ͯ]/g, '')
      .toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
  }
  slugEl.addEventListener('input', function () { slugEdited = true; });
  nameEl.addEventListener('input', function () {
    if (!slugEdited) slugEl.value = toSlug(nameEl.value);
    redraw();
  });

  /* ── Canvas zone editor ── */
  var canvas  = document.getElementById('zoneCanvas');
  if (!canvas) return;

  var img     = document.getElementById('mapImg');
  var fxEl    = document.getElementById('fx');
  var fyEl    = document.getElementById('fy');
  var fwEl    = document.getElementById('fw');
  var fhEl    = document.getElementById('fh');
  var typeEl  = document.getElementById('type');

  var allZones   = JSON.parse(canvas.dataset.zones);
  var currentId  = canvas.dataset.currentId ? parseInt(canvas.dataset.currentId) : null;

  var ctx        = canvas.getContext('2d');
  var scale      = 1;
  var dragRect   = null;
  var dragging   = false;
  var startX, startY;

  var TYPE_COLORS = {
    town:        '#58a6ff',
    dungeon:     '#f85149',
    field:       '#3fb950',
    raid:        '#f0883e',
    event:       '#d2a53a',
    shop:        '#a371f7',
    gather:      '#9acd32',
    craft:       '#c0a060',
    quest_board: '#e3b341'
  };

  function initCanvas() {
    var w = img.getBoundingClientRect().width;
    var h = img.getBoundingClientRect().height;
    if (!w || !h) return;
    scale          = w / img.naturalWidth;
    canvas.width   = w;
    canvas.height  = h;
    canvas.style.width  = w + 'px';
    canvas.style.height = h + 'px';
    redraw();
  }

  function redraw() {
    if (!canvas.width) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    /* draw sibling zones */
    allZones.forEach(function (z) {
      if (z.id === currentId) return;
      var color = TYPE_COLORS[z.type] || '#8b949e';
      ctx.fillStyle   = color + '44';
      ctx.strokeStyle = color;
      ctx.lineWidth   = 1.5;
      ctx.fillRect(z.x * scale, z.y * scale, z.width * scale, z.height * scale);
      ctx.strokeRect(z.x * scale, z.y * scale, z.width * scale, z.height * scale);
      ctx.fillStyle = '#fff';
      ctx.font = 'bold 11px sans-serif';
      ctx.shadowColor = '#000';
      ctx.shadowBlur  = 3;
      ctx.fillText(z.name, z.x * scale + 4, z.y * scale + 14);
      ctx.shadowBlur = 0;
    });

    /* draw current zone from form values */
    var cx = parseInt(fxEl.value) || 0;
    var cy = parseInt(fyEl.value) || 0;
    var cw = Math.max(1, parseInt(fwEl.value) || 100);
    var ch = Math.max(1, parseInt(fhEl.value) || 100);
    var currentName = nameEl.value || '(zone)';
    var currentType = typeEl.value;
    var color = TYPE_COLORS[currentType] || '#8b949e';

    ctx.fillStyle   = color + '66';
    ctx.strokeStyle = '#fff';
    ctx.lineWidth   = 2;
    ctx.fillRect(cx * scale, cy * scale, cw * scale, ch * scale);
    ctx.strokeRect(cx * scale, cy * scale, cw * scale, ch * scale);
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 12px sans-serif';
    ctx.shadowColor = '#000';
    ctx.shadowBlur  = 4;
    ctx.fillText(currentName, cx * scale + 4, cy * scale + 16);
    ctx.shadowBlur = 0;

    /* live drag rectangle */
    if (dragRect) {
      ctx.strokeStyle = '#fff';
      ctx.lineWidth   = 1;
      ctx.setLineDash([4, 3]);
      ctx.strokeRect(dragRect.x, dragRect.y, dragRect.w, dragRect.h);
      ctx.setLineDash([]);
    }
  }

  function getPos(e) {
    var rect = canvas.getBoundingClientRect();
    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
  }

  canvas.addEventListener('mousedown', function (e) {
    if (e.button !== 0) return;
    var p = getPos(e);
    dragging = true;
    startX   = p.x;
    startY   = p.y;
    dragRect = { x: p.x, y: p.y, w: 0, h: 0 };
  });

  canvas.addEventListener('mousemove', function (e) {
    if (!dragging) return;
    var p  = getPos(e);
    var dx = p.x - startX;
    var dy = p.y - startY;
    dragRect = {
      x: dx >= 0 ? startX : p.x,
      y: dy >= 0 ? startY : p.y,
      w: Math.abs(dx),
      h: Math.abs(dy)
    };
    /* live-write natural px to form fields */
    fxEl.value = Math.round(Math.min(startX, p.x) / scale);
    fyEl.value = Math.round(Math.min(startY, p.y) / scale);
    fwEl.value = Math.max(1, Math.round(Math.abs(dx) / scale));
    fhEl.value = Math.max(1, Math.round(Math.abs(dy) / scale));
    redraw();
  });

  canvas.addEventListener('mouseup', function () {
    if (!dragging) return;
    dragging = false;
    dragRect = null;
    redraw();
  });

  canvas.addEventListener('mouseleave', function () {
    if (dragging) { dragging = false; dragRect = null; redraw(); }
  });

  /* sync form inputs → canvas */
  [fxEl, fyEl, fwEl, fhEl].forEach(function (el) {
    el.addEventListener('input', redraw);
  });
  typeEl.addEventListener('change', redraw);

  /* init once image is loaded */
  if (img.complete && img.naturalWidth) {
    initCanvas();
  } else {
    img.addEventListener('load', initCanvas);
  }

  /* re-init on container resize */
  if (window.ResizeObserver) {
    new ResizeObserver(initCanvas).observe(img);
  }
})();

/* ── Gather resources ── */
var gatherItemsData = {{ gatherItems|map(i => {id: i.id, name: i.name})|json_encode|raw }};
var gatherInitial   = {{ zone.gatherResources ? zone.gatherResources|json_encode|raw : '[]' }};

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function gatherAddRow(itemId, minVal, maxVal, chanceVal) {
  var container = document.getElementById('gatherRowsContainer');
  var row = document.createElement('div');
  row.style.cssText = 'display:grid;grid-template-columns:1fr 70px 70px 70px 30px;gap:6px;align-items:center';
  var sel = '<select name="gatherItemIds[]">'
    + gatherItemsData.map(function(i) {
        return '<option value="'+i.id+'"'+(i.id==itemId?' selected':'')+'>'+escHtml(i.name)+'</option>';
      }).join('') + '</select>';
  row.innerHTML = sel
    + '<input type="number" name="gatherMin[]"    value="'+(minVal||1)+'"    min="1" placeholder="Min">'
    + '<input type="number" name="gatherMax[]"    value="'+(maxVal||1)+'"    min="1" placeholder="Max">'
    + '<input type="number" name="gatherChance[]" value="'+(chanceVal||100)+'" min="1" max="100" placeholder="%">'
    + '<button type="button" onclick="this.closest(\'div\').remove()" style="background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem">✕</button>';
  container.appendChild(row);
}

gatherInitial.forEach(function(r) { gatherAddRow(r.itemId, r.minQty, r.maxQty, r.chance); });
</script>
{% endblock %}