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

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

    <div class="ui top attached tabular menu">
        {% for localeCode, translationForm in attr.translations %}
            <a class="item{% if 0 == loop.index0 %} active{% endif %}" data-tab="{{ localeCode }}">
                {{ flags.fromLocaleCode(localeCode) }} {{ localeCode|sylius_locale_name }}
            </a>
        {% endfor %}
    </div>

    {% for localeCode, translationForm in attr.translations %}
        <div class="ui bottom attached tab segment{% if 0 == loop.index0 %} active{% endif %}" data-tab="{{ localeCode }}">
            {% apply spaceless %}
                {% for child in form %}
                    {% if localeCode == child.localeCode.vars.value %}
                        {{ self.collection_item(child, allow_delete, button_delete_label, loop.index0) }}
                    {% endif %}
                {% endfor %}
            {% endapply %}
        </div>
    {% endfor %}
{%- endblock collection_widget %}

{% macro collection_item(form, allow_delete, button_delete_label, index) %}
    <div class="attribute" data-id="{{ form.vars.data.attribute.code }}">
        {% if 'checkbox' in form.children.value.vars.block_prefixes %}
            <div class="ui toggle checkbox" style="margin-top: 15px; margin-bottom: 15px;">
                {{ form_widget(form.value) }}
                <label>{{ form.vars.value.attribute.name }}</label>
            </div>
            <button class="ui red right labeled icon button" style="float: right;">
                <i class="remove icon"></i> {{ 'sylius.ui.delete'|trans }}
            </button>
        {% else %}
            <div class="ui right fluid labeled input" style="margin-top: 15px; margin-bottom: 15px;">
                <div class="ui label">{{ form.vars.value.attribute.translation(form.vars.value.localeCode).name }}</div>
                {{ form_widget(form.value) }}
                <button class="ui red right labeled icon button">
                    <i class="remove icon"></i> {{ 'sylius.ui.delete'|trans }}
                </button>
            </div>
            {{ form_errors(form.value) }}
        {% endif %}
        <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 %}
