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

{% block global_attributes %}
    data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
    data-grav-array-keyname="{{ field.placeholder_key|e|tu }}"
    data-grav-array-valuename="{{ field.placeholder_value|e|tu }}"
    {{ parent() }}
{% endblock %}

{% macro renderer(key, content, field, scope, level, parent_key, up_level) %}
    {% macro field(value, key, level, globalvars, disable_name, hidden) %}
        {% set name = 'data[' ~ globalvars.field.name|replace({'.': ']['}) ~ ']' ~ key %}
        <div class="form-row array-field-value_only js__multilevel-field {{ level == 0 ? 'top' : '' }}"
            data-grav-array-type="row" {% if (hidden|default(false) == true) %}style="display: none"{% endif %}>
            <input
                type="text"
                {% if (disable_name != true) %}name="{{ name }}"{% endif %}
                data-attr-name="{{ name }}"
                placeholder="{{ field.placeholder_value|e|tu }}"
                style="margin-left: {{ level * 50 }}px"
                value="{{ value }}" />

            <span class="fa fa-minus js__remove-item"></span>
            <span class="fa fa-plus js__add-sibling hidden" data-level="{{level}}"></span>
            <span class="fa fa-plus-circle js__add-children hidden" data-level="{{level}}"></span>
        </div>
    {% endmacro %}

    {% if level == 0 %}

        {{ _self.field(key, '', level, _context, true, (is_numeric(key) ? true : false)) }}

        {% if content is not iterable %}
            {% set level2 = level + 1 %}

            <div class="children-wrapper">
                <div class="element-wrapper">
                    {{ _self.field(content, '[' ~ key ~ ']', level2, _context) }}
                </div>
            </div>
        {% endif %}
    {% endif %}

    {% if up_level %}
        {% set level = level + 1 %}
    {% endif %}
    <div class="children-wrapper">
        {% set unique_child = (is_array(content) and content.length > 1) ? true : false %}

        {% for inner_key, inner_content in content -%}
            <div class="element-wrapper">
                {% if not is_numeric(inner_key) %}
                    {% if (content|length > 1) %}
                        {{ _self.field(inner_key, parent_key, level, _context, true) }}
                    {% else %}
                        {{ _self.field(inner_key, parent_key, level, _context) }}
                    {% endif %}
                    {% set level2 = level + 1 %}
                    {% set up_level = true %}
                {% else %}
                    {% set up_level = false %}
                    {% set level2 = level %}
                {% endif %}

                {% if inner_content is not iterable %}

                    {% if not is_numeric(inner_key) %}
                        <div class="children-wrapper">
                            <div class="element-wrapper">
                    {% endif %}

                    {% set last_key = (is_numeric(inner_key)) ? '' : inner_key %}
                    {{ _self.field(inner_content, parent_key ~ '[' ~ inner_key ~ ']', level2, _context) }}

                    {% if not is_numeric(inner_key) %}
                            </div>
                        </div>
                    {% endif %}
                {% else %}

                    {% set inner_parent_key = parent_key ~ '[' ~ inner_key ~ ']' %}
                    {{ _self.renderer(inner_key, inner_content, field, scope, level, inner_parent_key, up_level) }}
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endmacro %}

{% block input %}
    <div data-id="{{random_string()}}" data-grav-multilevel-field data-grav-array-type="container" data-grav-array-mode="value_only"{{ value|length <= 1 ? ' class="one-child"' : '' }}>
        {% if value|length %}
            {% for key, content in value -%}
                <div class="element-wrapper">
                    {{ _self.renderer(key, content, field, scope, 0, '[' ~ key ~ ']', true) }}
                </div>
            {% endfor %}
        {%- else -%}
            {# Empty value, mock the entry field#}
            <div class="element-wrapper">
                <div class="form-row array-field-value_only js__multilevel-field"
                    data-grav-array-type="row">

                    <input
                        type="text"
                        name="{{ (scope ~ field.name)|fieldName }}"
                        placeholder="Enter value"
                        value="" />

                    <span class="fa fa-minus js__remove-item"></span>
                    <span class="fa fa-plus js__add-sibling hidden" data-level="0" ></span>
                    <span class="fa fa-plus-circle js__add-children hidden" data-level="0"></span>
                </div>
            </div>
        {%- endif %}
    </div>
{% endblock %}