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

  <div class="status-array-rows" id="rows-{{ fieldName }}" data-field="{{ fieldName }}">
    {% if currentValue %}
      {% for idx, skillId in currentValue %}
        <div class="status-array-row">
          <select name="{{ fieldName }}[{{ idx }}]">
            <option value="">— Compétence —</option>
            {% for skill in skills %}
              <option value="{{ skill.id }}" data-game="{{ skill.gameId }}" {{ skillId == skill.id ? 'selected' }}>{{ skill.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="">— Compétence —</option>
      {% for skill in skills %}
        <option value="{{ skill.id }}" data-game="{{ skill.gameId }}">{{ skill.name }}</option>
      {% endfor %}
    </select>
    <button type="button" class="btn btn-sm btn-delete js-status-row-remove">✕</button>
  </div>
</template>