{% load i18n %}

<div class="automation-slot"
     data-automation-slot="{{ slot.key }}"
     data-automation-slot-kind="{{ slot.kind }}"
     {% if slot.root %}data-automation-root="{{ slot.key }}"{% endif %}>
  {% if not slot.root %}<div class="form-label fw-semibold mt-2">{{ slot.label }}</div>{% endif %}
  <div data-automation-list></div>
  <div class="input-group mt-2" data-automation-slot-controls>
    {% if slot.pickable %}
      <label class="input-group-text" for="{{ slot.picker_id }}">{{ slot.label }}</label>
      <select class="form-select"
              id="{{ slot.picker_id }}"
              data-automation-picker="{{ slot.key }}">
        {% for kind, choices in editor.choices.items %}
          {% if kind == slot.kind %}
            {% for node in choices %}<option value="{{ node.kind }}">{{ node.title }}</option>{% endfor %}
          {% endif %}
        {% endfor %}
      </select>
    {% endif %}
    <button type="button"
            class="btn btn-outline-secondary"
            data-automation-add="{{ slot.key }}">{{ slot.add_label }}</button>
  </div>
</div>