{% set product = hookable_metadata.context.resource %}

<div class="card mb-3">
    <div class="card-header">
        <div class="card-title">
            {{ 'sylius.ui.attributes'|trans }}
        </div>
    </div>
    <div {{ sylius_test_html_attribute('attributes') }}>
        <div class="bg-white mb-3">
            <div class="accordion accordion-flush" id="attribute-translations">
                {% set set_locale_codes = [] %}
                {% if product.attributes|length == 0 %}
                    {{ 'sylius.ui.there_are_no_attributes_configured'|trans }}
                {% else %}
                    {% for attribute in product.attributes %}
                        {% if attribute.localeCode not in set_locale_codes %}
                            {% set locale_code = attribute.localeCode %}
                                <div class="accordion-item">
                                    <h2 class="accordion-header">
                                        {% if locale_code %}
                                            {% hook 'attributes#head' with { locale_code, loop } %}
                                        {% else %}
                                            {% hook 'attributes#head' with { loop } %}
                                        {% endif %}
                                    </h2>
                                    {% if locale_code %}
                                        <div {{ sylius_test_html_attribute('translatable-attribute') }}>
                                            {% hook 'attributes#body' with { 'attributes': product.attributes, locale_code } %}
                                        </div>
                                    {% else %}
                                        <div {{ sylius_test_html_attribute('non-translatable-attribute') }}>
                                            {% hook 'attributes#body' with { 'attributes': product.attributes } %}
                                        </div>
                                    {% endif %}
                                </div>
                                {%  set set_locale_codes = set_locale_codes|merge([locale_code]) %}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
</div>