{% import _self as self %}
{% import '@SyliusUi/Macro/flags.html.twig' as flags %}

{% set subject = metadata.name|replace({'_attribute': ''}) %}
{% for code, localeCodes in forms %}
    <div class="attributes-group" data-attribute-code="{{ code }}">
        <div class="attributes-header">
            <strong>{{ (localeCodes|first).vars.label }}</strong>
            <div>
                <button class="ui basic red labeled icon button" data-attribute="delete">
                    <i class="remove icon"></i>{{ 'sylius.ui.delete'|trans }}
                </button>
            </div>
        </div>
        <div class="attributes-list">
            {% for localeCode, form in localeCodes %}
                <div class="attribute" data-id="{{ code }}">
                    {% set id = form.vars.label|replace({' ': '_'})|lower %}
                    <div class="attribute-row">
                        <div class="attribute-label{% if not localeCode or localeCode == sylius_base_locale %} required field{% endif %}">
                            <label>
                                {% if localeCode %}
                                    <span class="language">{{ flags.fromLocaleCode(localeCode) }} {{ localeCode|sylius_locale_name }}</span>
                                    <br>
                                {% else %}
                                    <i class="globe icon"></i>
                                {% endif %}
                                {{ form.vars.label }}
                            </label>
                        </div>
                        <div class="attribute-input" data-test-product-attribute-value-in-locale="{{ "%s %s"|format(form.vars.label, localeCode) }}">
                            {% if 'type_checkbox' in form.vars.cache_key %}
                                <div class="ui toggle checkbox">
                                    {{ self.formField(form, count, id, '', subject, metadata.applicationName) }}
                                    <label></label>
                                </div>
                            {% else %}
                                {{ self.formField(form, count, id, '', subject, metadata.applicationName) }}
                            {% endif %}
                        </div>
                        <div class="attribute-action">
                            {% if localeCode %}
                                <a href="#" class="ui basic button" data-attribute="copy">{{ 'sylius.ui.apply_to_all'|trans }}</a>
                            {% endif %}
                        </div>
                    </div>
                    <input type="hidden"
                           name="{{ metadata.applicationName }}_{{ subject }}[attributes][{{ count }}][attribute]"
                           id="{{ metadata.applicationName }}_{{ subject }}_attributes_{{ count }}_attribute"
                           value="{{ code }}"/>
                    <input type="hidden"
                           name="{{ metadata.applicationName }}_{{ subject }}[attributes][{{ count }}][localeCode]"
                           id="{{ metadata.applicationName }}_{{ subject }}_attributes_{{ count }}_localeCode"
                           value="{{ localeCode }}"/>
                    {% set count = count + 1 %}
                </div>
            {% endfor %}
        </div>
    </div>
{% endfor %}

{% macro formField(item, count, id, prefix, subject, applicationName) %}
    {% from _self import formField %}
    {% if item.children|length > 0 %}
        {% set prefix = prefix~'_'~item.vars.name %}
        {% for child in item.children %}
            {{ formField(child, count, id, prefix, subject, applicationName) }}
        {% endfor %}
    {% elseif item.vars.name != '_token' %}
        {% set namePrefix = prefix|replace({'_': ']['}) %}
        {% set dataName = applicationName~'_'~subject~'[attributes]['~count~namePrefix~']['~item.vars.name~']' %}
        {% if item.vars.multiple is defined and item.vars.multiple %}
            {% set dataName = dataName~'[]' %}
        {% endif %}

        {{ form_widget(item, {'id': id, 'attr': {'data-name': dataName }}) }}
    {% endif %}
{% endmacro %}
