{% extends '@EasyAdmin/form/bootstrap_4.html.twig' %}

{% block _gems_translations_label %}
{% endblock %}

{% block _gems_translations_widget %}
    {{ form_errors(form) }}
    <div class="a2lix_translations w-100">
        <ul class="a2lix_translationsLocales nav nav-tabs" role="tablist">
            {% set localeName = '' %}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">{{'select lenguage'|trans}} <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    {% for translationsFields in form %}
                        {% set locale = translationsFields.vars.name %}
                        {% if app.user.locale == locale %}
                            {% set localeName = translationsFields.vars.label|default(locale|humanize)|trans  %}
                        {% endif %}
                        
                        <li class="nav-item">
                            <a href="#{{ translationsFields.vars.id }}_a2lix_translations-fields" class="nav-link click_link {% if app.user.locale == locale %}active{% endif %}" data-toggle="tab" role="tab">
                                {{ translationsFields.vars.label|default(locale|humanize)|trans }}
                                {% if form.vars.default_locale == locale %}{{ '[Default]'|trans }}{% endif %}
                                {% if translationsFields.vars.required %}*{% endif %}
                            </a>
                        </li>

                    {% endfor %}                     
                </ul>
            </li>

            <li class="nav-item">
                <a id='mySelection' class="nav-link disabled" href="#">{{localeName}}</a>
            </li>
        </ul>

        <div class="a2lix_translationsFields tab-content">
            {% for translationsFields in form %}
                {% set locale = translationsFields.vars.name %}
                <div id="{{ translationsFields.vars.id }}_a2lix_translations-fields" class="tab-pane {% if app.request.locale == locale %}show active{% endif %} {% if not form.vars.valid %}sonata-ba-field-error{% endif %}" role="tabpanel">
                    <div class="row">
                        <div class="col-md-12">
                            {{ form_row(translationsFields.name) }}
                        </div>
                        <div class="col-md-12">
                            {{ form_row(translationsFields.description) }}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.dropdown-toggle').dropdown()

            $(".click_link").click(function() {
                $(".click_link").removeClass('active')
                $("#mySelection").text($(this).text().trim())
                
            });
        });
    </script>

{% endblock %}