<div id="more-details" class="ui styled fluid accordion">
    {% for translation in product.translations %}
        <div class="title">
            <i class="dropdown icon"></i>
            <i class="{{ translation.locale|slice(-2)|lower }} flag"></i>
            {{ translation.locale|sylius_locale_name }}
        </div>
        <div class="ui content">
            <table class="ui very basic celled table">
                <tbody>
                <tr>
                    <td class="three wide"><strong class="gray text">{{ 'sylius.ui.name'|trans }}</strong></td>
                    <td>{{ translation.name }}</td>
                </tr>
                <tr>
                    <td class="three wide"><strong class="gray text">{{ 'sylius.ui.slug'|trans }}</strong></td>
                    <td>{{ translation.slug }}</td>
                </tr>
                <tr>
                    <td class="three wide"><strong class="gray text">{{ 'sylius.ui.description'|trans }}</strong></td>
                    <td>{{ translation.description|nl2br }}</td>
                </tr>
                <tr>
                    <td class="three wide"><strong class="gray text">{{ 'sylius.ui.meta_keywords'|trans }}</strong></td>
                    <td>{{ translation.metaKeywords }}</td>
                </tr>
                <tr>
                    <td class="three wide"><strong class="gray text">{{ 'sylius.ui.meta_description'|trans }}</strong></td>
                    <td>{{ translation.metaDescription }}</td>
                </tr>
                <tr>
                    <td class="three wide"><strong class="gray text">{{ 'sylius.ui.short_description'|trans }}</strong></td>
                    <td>{{ translation.shortDescription }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    {% endfor %}
</div>
