{# 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, statusId in currentValue %}
        <div class="status-array-row">
          <select name="{{ fieldName }}[{{ idx }}]">
            <option value="">— Statut —</option>
            {% for status in statuses %}
              <option value="{{ status.id }}" {{ statusId == status.id ? 'selected' }}>{{ status.name }}</option>
            {% endfor %}
          </select>
          <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__]">
      <option value="">— Statut —</option>
      {% for status in statuses %}
        <option value="{{ status.id }}">{{ status.name }}</option>
      {% endfor %}
    </select>
    <button type="button" class="btn btn-sm btn-delete js-status-row-remove">✕</button>
  </div>
</template>