{% extends 'forms/' ~ layout|default('field') ~ '.html.twig' %}

{% block input %}
    <div class="g-keyvalue-field{% if field.size %} g-keyvalue-{{ field.size }}{% endif %}">
        <ul>
        {% if value %}
        {% for data in value %}
            {% for key, val in data %}
            <li data-keyvalue-item>
                <i class="fa fa-reorder font-small item-reorder"></i>
                <div class="g-keyvalue-wrapper">
                    <input class="g-keyvalue-input-key" type="text" data-keyvalue-key="{{ key|e }}" value="{{ key|e }}" {% if field.key_placeholder is defined %}placeholder="{{ field.key_placeholder|e }}"{% endif %} />
                    <i class="g-keyvalue-sep fa fa-fw fa-arrow-right"></i>
                    <input class="g-keyvalue-input-value" type="text" data-keyvalue-value="" value="{{ val|e }}" {% if field.value_placeholder is defined %}placeholder="{{ field.value_placeholder|e }}"{% endif %} />
                </div>
                <i class="fa fa-fw fa-trash font-small" data-keyvalue-remove></i>
            </li>
            {% endfor %}
        {% endfor %}
        {% endif %}
        </ul>

        <span class="button button-simple" data-keyvalue-addnew="" title="Add new item"><i class="fa fa-plus font-small"></i></span>
    </div>
    <ul style="display: none">
        <li data-keyvalue-nosort data-keyvalue-template>
            <i class="fa fa-reorder font-small item-reorder"></i>
            <div class="g-keyvalue-wrapper">
                <input class="g-keyvalue-input-key" type="text" data-keyvalue-key="" value="" {% if field.key_placeholder is defined %}placeholder="{{ field.key_placeholder|e }}"{% endif %} />
                <i class="g-keyvalue-sep fa fa-fw fa-arrow-right"></i>
                <input class="g-keyvalue-input-value" type="text" data-keyvalue-value="" value="" {% if field.value_placeholder is defined %}placeholder="{{ field.value_placeholder|e }}"{% endif %} />
            </div>
            <i class="fa fa-fw fa-trash font-small" data-keyvalue-remove></i>
        </li>
    </ul>
    <input type="hidden" data-keyvalue-data data-keyvalue-exclude="{{ field.exclude|default([])|json_encode|e('html_attr') }}" name="{{ (scope ~ name ~ '._json')|fieldName|e }}"  value="{{ value|default({})|json_encode(constant('JSON_UNESCAPED_SLASHES'))|e('html_attr') }}" />
{% endblock %}
