<div class="dynamic-array-widget"
     id="{{ widget.name }}_container"
     data-name="{{ widget.name }}"
     {% for name, value in widget.attrs.items %}{% if value is not False and name != "id" and name != "class" %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}
     {% endif %}
     {% endfor %}>
    <div class="array-items">
        {% for item in value_list %}
            <div class="array-item d-flex mb-2">
                <input type="text"
                       class="form-control array-item-input"
                       value="{{ item|default:'' }}"
                       data-index="{{ forloop.counter0 }}" />
                {% if forloop.counter != 1 %}
                    <button type="button"
                            class="btn btn-sm btn-outline-danger ms-2 remove-array-item"
                            title="Remove item">×</button>
                {% endif %}
            </div>
        {% empty %}
            <div class="array-item d-flex mb-2">
                <input type="text"
                       class="form-control array-item-input"
                       value=""
                       data-index="0" />
            </div>
        {% endfor %}
    </div>
    <button type="button" class="btn btn-sm btn-outline-primary add-array-item">+ Add Item</button>
    <input type="hidden"
           name="{{ widget.name }}"
           value="{{ value_list_json|safe }}"
           {% if widget.attrs.id %}id="{{ widget.attrs.id }}"{% endif %} />
</div>
