{# Expects: fieldName (string), sectionTitle (string), currentValue (?array), elements (Element[]) #}
<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 }}][element_id]">
            <option value="">— Élément —</option>
            {% for element in elements %}
              {% set elemGame = element.isCsi1Exclusive ? '0' : (element.isCsi2Exclusive ? '1' : (element.isCsiRogueExclusive ? '2' : '')) %}
              <option value="{{ element.id }}"{% if elemGame %} data-game="{{ elemGame }}"{% endif %} {{ entry['element_id'] == element.id ? 'selected' }}>{{ element.name }}</option>
            {% endfor %}
          </select>
          <input type="number" step="0.01" class="elemental-multiplier" name="{{ fieldName }}[{{ idx }}][multiplier]" placeholder="1.00" value="{{ entry['multiplier'] ?? '' }}">
          <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__][element_id]">
      <option value="">— Élément —</option>
      {% for element in elements %}
        {% set elemGame = element.isCsi1Exclusive ? '0' : (element.isCsi2Exclusive ? '1' : (element.isCsiRogueExclusive ? '2' : '')) %}
        <option value="{{ element.id }}"{% if elemGame %} data-game="{{ elemGame }}"{% endif %}>{{ element.name }}</option>
      {% endfor %}
    </select>
    <input type="number" step="0.01" name="{{ fieldName }}[__IDX__][multiplier]" placeholder="1.00">
    <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>