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

<div id="attributes">
    <h4 class="ui top attached large header">{{ 'sylius.ui.attributes'|trans }}</h4>
    <div class="ui attached segment">
        <div class="ui top attached tabular menu">
            {% set setLocales = [] %}
            {% for attributeValue in product.attributes %}
                {% if attributeValue.localeCode not in setLocales %}
                    {% set localeCode = attributeValue.localeCode %}
                    {% if attributeValue.localeCode is not null  %}
                        <a class="item{% if loop.first %} active {% endif %}" {% if loop.first %}{{ sylius_test_html_attribute('active') }}{% endif %} data-tab="{{ localeCode|sylius_locale_name }}" {{ sylius_test_html_attribute('tab', localeCode|sylius_locale_name) }}>{{ flags.fromLocaleCode(localeCode)}} {{ localeCode|sylius_locale_name }}</a>
                    {% else %}
                        <a class="item{% if loop.first %} active {% endif %}" {% if loop.first %}{{ sylius_test_html_attribute('active') }}{% endif %} data-tab="{{ 'non-translatable' }}" {{ sylius_test_html_attribute('tab', 'non-translatable') }}><i class="globe icon"></i></a>
                    {% endif %}
                    {%  set setLocales = setLocales|merge([localeCode]) %}
                {% endif %}
            {% endfor %}
        </div>
        {% for locale in setLocales %}
            {% set data_tab = (locale is not null ? locale|sylius_locale_name : 'non-translatable') %}
            <div class="ui bottom attached tab segment{% if loop.first %} active{% endif %}" data-tab="{{ data_tab }}" {{ sylius_test_html_attribute('tab', data_tab) }}>
                <table class="ui very basic celled table">
                    <tbody>
                    {% for attributeValue in product.attributes|filter(attributeValue => attributeValue.localeCode == locale) %}
                        <tr>
                            <td class="five wide">
                                <strong class="gray text">{{ attributeValue.name }}</strong>
                            </td>
                            <td>
                                {% include [
                                    '@SyliusAdmin/Product/Show/Types/'~attributeValue.type~'.html.twig',
                                    '@SyliusAttribute/Types/'~attributeValue.type~'.html.twig',
                                    '@SyliusAdmin/Product/Show/Types/default.html.twig'
                                ] with {
                                    'attribute': attributeValue,
                                    'locale': configuration.request.locale,
                                    'fallbackLocale': configuration.request.defaultLocale
                                } %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endfor %}
    </div>
</div>
