{% extends '@SyliusAdmin/Form/theme.html.twig' %}

{% block collection_widget -%}
    {% import _self as self %}

    <div>
        {% set attributes = {} %}

        {% for child in form %}
            {% set code = child.vars.data.attribute.code %}

            {% if attributes[code] is not defined %}
                {% set attributes = attributes|merge({ (code): [] }) %}
            {% endif %}

            {% set attributes = attributes|merge({ (code): attributes[code]|merge([child]) }) %}
        {% endfor %}

        {% for key, attribute in attributes %}
            <div class="attributes-group" data-attribute-code="{{ key }}">
                <div class="attributes-header">
                    <strong>{{ attribute[0].value.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 child in attribute %}
                        {{ self.collection_item(child) }}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
{%- endblock collection_widget %}

{% macro collection_item(form) %}
    {% import '@SyliusUi/Macro/flags.html.twig' as flags %}

    <div class="attribute" data-id="{{ form.vars.data.attribute.code }}">
        <div class="attribute-row">
            <div class="attribute-label{% if not form.localeCode.vars.value or form.localeCode.vars.value == sylius_base_locale %} required field{% endif %}">
                <label>
                    {% if form.localeCode.vars.value %}
                        <span class="language">{{ flags.fromLocaleCode(form.localeCode.vars.value) }} {{ form.localeCode.vars.value|sylius_locale_name }}</span>
                        <br>
                    {% else %}
                        <i class="globe icon"></i>
                    {% endif %}
                    {{ form.vars.value.attribute.translation(form.vars.value.localeCode).name }}
                </label>
            </div>
            <div class="attribute-input" data-test-product-attribute-value-in-locale="{{ "%s %s"|format(form.vars.data.attribute.name, form.localeCode.vars.value) }}">
                <div {{ 'checkbox' in form.children.value.vars.block_prefixes ? 'class="ui toggle checkbox"' : '' }}>
                    {{ form_widget(form.value) }}
                </div>
            </div>
            <div class="attribute-action">
                {% if form.localeCode.vars.value %}
                    <a href="#" class="ui basic button" data-attribute="copy">{{ 'sylius.ui.apply_to_all'|trans }}</a>
                {% endif %}
            </div>
            <div class="attribute-error">
                {{ form_errors(form.value) }}
            </div>
        </div>
        <input type="hidden" name="{{ form.attribute.vars.full_name }}" id="{{ form.attribute.vars.id }}" value="{{ form.vars.data.attribute.code }}"/>
        <input type="hidden" name="{{ form.localeCode.vars.full_name }}" id="{{ form.localeCode.vars.id }}" value="{{ form.localeCode.vars.value }}"/>
    </div>
{% endmacro %}
