form-field-extensible-list.html

{%- capture this_template_id -%}{{ include.label | slugify }}-item-template{%- endcapture -%}
{%- capture this_add_id -%}{{ include.label | slugify }}-add-item{%- endcapture -%}
{%- capture this_id -%}{{ include.label | remove: 'label_' | slugify }}{%- endcapture -%}

<fieldset
    id="form-field-{{ this_id }}"
    {% include patterns/form-field-auto-save-attributes %}
    class="
        pat-form-field-extensible-list
        {{ include.class }}
        {% include patterns/form-field-auto-save-classes %}
        {% if item.depends %}pat-depends{% endif %} 
        group">
    <legend>
        {%- include patterns/form-field-label-conditional.html -%}
    </legend>
    <ol
        id="{{ this_id }}-list"
        class="
            pat-sortable 
            pat-clone 
            pat-sortable-blocks"
        data-pat-clone="
            template: #{{ this_template_id }}; 
            trigger-element: #{{ this_add_id }};" 
        data-pat-sortable="
            selector: #{{ this_id }}-list .sortable-item">
        {% for item in include.items %}
            <li
                class="
                    clone
                    spaces-item 
                    sortable-item 
                    space-item">
                <div 
                    class="field-cluster">
                    <label
                        class="rule-item">
                        {% include patterns/i18n id="patterns.label_name" %}
                        <input
                            tabindex="0"
                            class="pat-autofocus"
                            placeholder="{%- include patterns/i18n id=include.placeholder %}"
                            name="name-{% raw %}#{1}{% endraw %}"
                            value="{{ item.name }}"
                            type="text">
                    </label>
                </div>
                {% include patterns/sortable-blocks-button-cluster.html %}
            </li>
        {% endfor %}
    </ol>

    <div
        class="pat-button-bar">
        <button
            tabindex="0"
            class="
                add-item 
                icon-plus-circle 
                pat-button 
                add-clone"
            type="button"
            id="{{ this_add_id }}">{% include patterns/i18n id=include.button-label %}</button>
    </div>

    <template
        id="{{ this_template_id }}">
        <li
            class="
                clone
                spaces-item 
                sortable-item 
                space-item">
            <div 
                class="field-cluster">
                <label
                    class="rule-item">
                    {% include patterns/i18n id="patterns.label_name" %}
                    <input
                        tabindex="0"
                        class="pat-autofocus"
                        placeholder="{%- include patterns/i18n id=include.placeholder %}"
                        name="name-{% raw %}#{1}{% endraw %}"
                        value="{{ item.name }}"
                        type="text">
                </label>
            </div>
            {% include patterns/sortable-blocks-button-cluster.html %}
        </li>
    </template>
</fieldset>