{% extends "forms/field.html.twig" %}

{% set value = (value is null ? field.default : value) %}
{% set name = field.name %}
{% set btnLabel = field.btnLabel is defined ? field.btnLabel : "PLUGIN_ADMIN.ADD_ITEM" %}
{% set btnSortLabel = field.btnSortLabel is defined ? field.btnSortLabel : "PLUGIN_ADMIN.SORT_BY" %}
{% set fieldControls = field.controls|default('bottom') %}

{% block contents %}
    <div class="form-label{% if not vertical %} block size-1-3 pure-u-1-3{% endif %}">
        {% if field.toggleable %}
            <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ (scope ~ field.name)|fieldName }}">
                <input type="checkbox"
                       id="toggleable_{{ field.name }}"
                       {% if toggleableChecked %}value="1"{% endif %}
                       name="toggleable_{{ (scope ~ field.name)|fieldName }}"
                       {% if toggleableChecked %}checked="checked"{% endif %}
                >
                <label for="toggleable_{{ field.name }}"></label>
            </span>
        {% endif %}
        <label{{ (field.toggleable ? ' class="toggleable" for="toggleable_' ~ field.name ~ '"')|raw }}>
            {% if field.help %}
            <span class="hint--bottom" data-hint="{{ field.help|t }}">{{ field.label|t }}</span>
            {% else %}
            {{ field.label|t }}
            {% endif %}
            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
        </label>
    </div>
    <div class="form-data{% if not vertical %} block size-2-3 pure-u-2-3{% endif %}"
        {% block global_attributes %}
        data-grav-field="{{ field.type }}"
        data-grav-disabled="{{ toggleableChecked }}"
        data-grav-default="{{ field.default|json_encode|e('html_attr') }}"
        {% endblock %}
    >

        <div class="form-list-wrapper {{ field.size }}" data-type="collection"
             {% if field.selectunique %}
                 data-select-unique="{{ field.selectunique|json_encode|e('html_attr') }}"
                 data-max="{{ field.selectunique|length }}"
             {% endif %}
            {% if field.min is defined %}data-min="{{ field.min }}"{% endif %}
            {% if field.max is defined and not field.selectunique %}data-max="{{ field.max }}"{% endif %}
        >
            {% if fieldControls in ['top', 'both'] %}
                <div class="collection-actions">
                    {% if collapsible %}
                        <button class="button" type="button" data-action="expand_all"
                                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-chevron-circle-down"></i> {{ "PLUGIN_ADMIN.EXPAND_ALL"|t }}</button>
                        <button class="button" type="button" data-action="collapse_all"
                                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-chevron-circle-right"></i> {{ "PLUGIN_ADMIN.COLLAPSE_ALL"|t }}</button>
                    {% endif %}
                    {% if field.sortby %}
                        <button class="button{{ not value|length ? ' hidden' : '' }}" type="button" data-action="sort" data-action-sort="{{ field.sortby }}" data-action-sort-dir="{{ field.sortby_dir|default('asc') }}"
                                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-sort-amount-{{ field.sortby_dir|default('asc') }}"></i> {{ btnSortLabel|t }} '{{ field.sortby }}'</button>
                    {% endif %}
                    <button class="button" type="button" data-action="add"
                            data-action-add="{{ field.placement is same as('position') ? 'top' : field.placement|default('bottom') }}"
                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                    ><i class="fa fa-plus"></i> {{ btnLabel|t }}</button>
                </div>
            {% endif %}
            <ul  {% if field.classes is defined %}class="{{ field.classes }}"{% endif %} data-collection-holder="{{ name }}"
                {% if field.sort is same as(false) %}
                    data-collection-nosort
                {% endif %}>
                {% if field.fields %}
                {% set collapsible = field.fields|length > 1 and (field.collapsible is not defined or field.collapsible)  %}
                {% for key, val in value %}
                    {% set item_name = name ? name ~ '.' ~ key : key %}
                    <li data-collection-item="{{ item_name }}"
                        data-collection-key="{{ key }}"
                        class="{{ collapsible and field.collapsed ? 'collection-collapsed' : '' }}"
                        {% if field.min_height %}style="min-height:{{ field.min_height }};"{% endif %}>
                        <div class="collection-sort"><i class="fa fa-fw fa-bars"></i></div>
                            {%- for child_name, child in field.fields -%}
                                {% set child = prepare_form_field(child, child_name, item_name) %}
                                {% if child %}
                                    {% set child = child|merge({ '_list_index': item_name }) %}
                                    {% set default_layout = 'text' %}
                                    {% if child.type == 'key' or (child.key == true and child.type != 'list') %}
                                        {# Special handling for the key field #}
                                        {% set default_layout = 'key' %}
                                        {% set child_value = key %}
                                    {% elseif child.name == 'value' %}
                                        {# Special handling for the value field #}
                                        {% set child = child|merge({ name: item_name }) %}
                                        {% set child_value = val %}
                                    {% else %}
                                        {% set child_value = form ? form.value(child.name) : data.value(child.name) %}
                                        {# Look for a default value for that field #}
                                        {% if child_value is null and val[child_name|trim('.', 'left')] is defined %}
                                          {% set child_value = val[child_name|trim('.', 'left')] %}
                                        {% endif %}
                                    {% endif %}

                                    {% set field_templates = include_form_field(child.type, field_layout, default_layout) %}
                                    {% set template_data = { field: child, value: child_value, originalValue: null } %}
                                    {% if default_layout != 'key' %}
                                        {% if child.type == 'fieldset' %}
                                            {% set template_data = template_data|merge({val: child_value}) %}
                                        {% endif %}
                                    {% endif %}
        
                                    {%- include field_templates with template_data -%}
                                {% endif %}
                            {% endfor %}
                            <div class="item-actions">
                                {% if collapsible %}
                                    <i class="fa fa-chevron-circle-{{ field.collapsed ? 'right' : 'down' }}" data-action="{{ field.collapsed ? 'expand' : 'collapse' }}"></i>
                                    <br />
                                {% endif %}
                                <i class="fa fa-trash-o" data-action="confirm"></i>
                                <div class="list-confirm-deletion button danger hidden"  data-action="delete">
                                  <i class="fa fa-fw text-primary fa-check"></i>
                                  <span>{{ 'PLUGIN_ADMIN.DELETE'|t }}</span>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                {% endif %}
            </ul>
            {% if fieldControls in ['bottom', 'both'] %}
            <div class="collection-actions">
                {% if collapsible %}
                    <button class="button" type="button" data-action="expand_all"
                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-chevron-circle-down"></i> {{ "PLUGIN_ADMIN.EXPAND_ALL"|t }}</button>
                    <button class="button" type="button" data-action="collapse_all"
                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-chevron-circle-right"></i> {{ "PLUGIN_ADMIN.COLLAPSE_ALL"|t }}</button>
                {% endif %}
                {% if field.sortby %}
                    <button class="button{{ not value|length ? ' hidden' : '' }}" type="button" data-action="sort" data-action-sort="{{ field.sortby }}" data-action-sort-dir="{{ field.sortby_dir|default('asc') }}"
                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-sort-amount-{{ field.sortby_dir|default('asc') }}"></i> {{ btnSortLabel|t }} '{{ field.sortby }}'</button>
                {% endif %}
                <button class="button" type="button" data-action="add"
                        data-action-add="{{ field.placement is same as('position') ? 'bottom' : field.placement|default('bottom') }}"
                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                ><i class="fa fa-plus"></i> {{ btnLabel|t }}</button>
            </div>
            {% endif %}

            {% set template %}
                {%- set item_name = name ? name ~ '.*' : '*' -%}
                <li data-collection-item="{{ item_name }}">
                    {% if field.sort is not same as(false) %}
                        <div class="collection-sort"><i class="fa fa-fw fa-bars"></i></div>
                    {% endif %}
                    {%- if field.fields -%}
                        {%- for child_name, child in field.fields -%}
                            {% set child = prepare_form_field(child, child_name, item_name) %}
                            {% if child %}
                                {% set child = child|merge({ '_list_index': item_name }) %}
                                {% set default_layout = 'text' %}
                                {% if child.type == 'key' or child.key == true %}
                                    {# Special handling for the key field #}
                                    {% set default_layout = 'key' %}
                                {% elseif child.name == 'value' %}
                                    {# Special handling for the value field #}
                                    {% set child = child|merge({ name: item_name }) %}
                                {% endif %}

                                {% set field_templates = include_form_field(child.type, field_layout, default_layout) %}
                                {% include field_templates with { field: child, value: null } %}
                            {% endif %}
                        {%- endfor %}
                        <div class="item-actions">
                            {% if collapsible %}
                                <i class="fa fa-chevron-circle-down" data-action="collapse"></i>
                                <br />
                            {% endif %}
                            <i class="fa fa-trash-o" data-action="confirm"></i>
                            <div class="list-confirm-deletion button danger hidden"  data-action="delete">
                              <i class="fa fa-fw text-primary fa-check"></i>
                              <span>{{ 'PLUGIN_ADMIN.DELETE'|t }}</span>
                            </div>
                        </div>
                    {%- endif -%}
                </li>
            {% endset %}
            <div style="display: none;" data-collection-template="new"
                 data-collection-template-html="{{ template|regex_replace('/([ \r\n]+)/', ' ')|e('html_attr') }}"></div>
            <div style="display: none;" data-collection-config="{{ name }}"></div>
        </div>
    </div>
{% endblock %}