{# Expects: fieldName (string), sectionTitle (string), currentValue (?array) #}
<div class="section">
  <div class="section-title">{{ sectionTitle }}</div>

  <div class="status-array-rows" id="rows-{{ fieldName }}" data-field="{{ fieldName }}">
    {% if currentValue %}
      {% for idx, entry in currentValue %}
        <div class="status-array-row">
          <select class="stats-array-stat" name="{{ fieldName }}[{{ idx }}][stat]">
            <option value="">— Stat —</option>
            <option value="pvMax"    {{ entry['stat'] == 'pvMax'    ? 'selected' }}>PV Max</option>
            <option value="egMax"    {{ entry['stat'] == 'egMax'    ? 'selected' }}>EG Max</option>
            <option value="attaque"  {{ entry['stat'] == 'attaque'  ? 'selected' }}>Attaque</option>
            <option value="defense"  {{ entry['stat'] == 'defense'  ? 'selected' }}>Défense</option>
            <option value="arcane"   {{ entry['stat'] == 'arcane'   ? 'selected' }}>Arcane</option>
            <option value="sagesse"  {{ entry['stat'] == 'sagesse'  ? 'selected' }}>Sagesse</option>
            <option value="vitesse"  {{ entry['stat'] == 'vitesse'  ? 'selected' }}>Vitesse</option>
            <option value="finesse"  {{ entry['stat'] == 'finesse'  ? 'selected' }}>Finesse</option>
          </select>
          <input type="number" class="stats-array-turns" name="{{ fieldName }}[{{ idx }}][turns]" min="0" value="{{ entry['turns'] ?? '' }}">
          <span class="status-array-pct">tours</span>
          <input type="number" class="stats-array-level" name="{{ fieldName }}[{{ idx }}][level]" min="1" value="{{ entry['level'] ?? 1 }}">
          <span class="status-array-pct">niveaux</span>
          <button type="button" class="btn btn-sm btn-delete js-status-row-remove">✕</button>
        </div>
      {% endfor %}
    {% endif %}
  </div>

  <button type="button" class="btn btn-sm js-status-row-add" style="margin-top:8px" data-target="rows-{{ fieldName }}">+ Ajouter</button>
</div>

<template id="tpl-{{ fieldName }}">
  <div class="status-array-row">
    <select class="stats-array-stat" name="{{ fieldName }}[__IDX__][stat]">
      <option value="">— Stat —</option>
      <option value="pvMax">PV Max</option>
      <option value="egMax">EG Max</option>
      <option value="attaque">Attaque</option>
      <option value="defense">Défense</option>
      <option value="arcane">Arcane</option>
      <option value="sagesse">Sagesse</option>
      <option value="vitesse">Vitesse</option>
      <option value="finesse">Finesse</option>
    </select>
    <input type="number" class="stats-array-turns" name="{{ fieldName }}[__IDX__][turns]" min="0">
    <span class="status-array-pct">tours</span>
    <input type="number" class="stats-array-level" name="{{ fieldName }}[__IDX__][level]" min="1" value="1">
    <span class="status-array-pct">niveaux</span>
    <button type="button" class="btn btn-sm btn-delete js-status-row-remove">✕</button>
  </div>
</template>

<script>
(function () {
  if (window.__statusArrayInit) { return; }
  window.__statusArrayInit = true;

  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.js-status-row-add');
    if (btn) {
      var container = document.getElementById(btn.dataset.target);
      var fieldName = container.dataset.field;
      var tpl = document.getElementById('tpl-' + fieldName);
      var idx = container.querySelectorAll('.status-array-row').length;
      var tmp = document.createElement('div');
      tmp.innerHTML = tpl.innerHTML.replace(/__IDX__/g, idx);
      container.appendChild(tmp.firstElementChild);
      return;
    }

    var removeBtn = e.target.closest('.js-status-row-remove');
    if (removeBtn) {
      var row = removeBtn.closest('.status-array-row');
      var container = row.closest('.status-array-rows');
      row.remove();
      container.querySelectorAll('.status-array-row').forEach(function (r, i) {
        r.querySelectorAll('[name]').forEach(function (el) {
          el.name = el.name.replace(/\[\d+\]/, '[' + i + ']');
        });
      });
    }
  });
})();
</script>