form-field-name-value-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 
    {% include patterns/form-field-auto-save-attributes %}
    class="
        pat-form-field-name-value-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: #{{ include.id }}-template; 
            trigger-element: #add-{{ include.id }};" 
        data-pat-sortable="
            selector: #{{ this_id }}-list .sortable-item">
        {% for item in page.pairs %}
            <li
                class="
                    clone
                    {{ include.id }} 
                    sortable-item">
                {% include patterns/form-field-name-value-list-rule.html %}
            </li>
        {% endfor %}
    </ol>

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

    <template
        id="{{ include.id }}-template">
        <li 
            class="
                {{ include.id }} 
                clone
                sortable-item">
            {% include patterns/form-field-name-value-list-rule.html %}
        </li>
    </template>
    {% include patterns/form-has-changes.html %}
    {% if include.help %}
    {% include patterns/form-help.html
        content=include.help 
        more=include.help_more %}
    {% endif %}
    {% include patterns/form-message.html message=include.message %}
</fieldset>