{# Expects: fieldName (string), sectionTitle (string), currentValue (?array), statuses (StatusMmo[]) #}
<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 name="{{ fieldName }}[{{ idx }}][status_id]">
            <option value="">— Statut —</option>
            {% for status in statuses %}
              <option value="{{ status.id }}" {{ entry['status_id'] == status.id ? 'selected' }}>{{ status.name }}</option>
            {% endfor %}
          </select>
          <input type="number" class="status-array-prob" name="{{ fieldName }}[{{ idx }}][probability]" min="0" max="100" value="{{ entry['probability'] ?? entry['chance'] ?? 0 }}">
          <span class="status-array-pct">%</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 name="{{ fieldName }}[__IDX__][status_id]">
      <option value="">— Statut —</option>
      {% for status in statuses %}
        <option value="{{ status.id }}">{{ status.name }}</option>
      {% endfor %}
    </select>
    <input type="number" class="status-array-prob" name="{{ fieldName }}[__IDX__][probability]" min="0" max="100" placeholder="0">
    <span class="status-array-pct">%</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>