<div class="container">

    <div class="row align-items-center py-1">

        <!-- Izquierda: Botones -->
        <div class="col">
        {% if languages %}
            <div class="btn-bar d-flex align-items-center">
            {% for lang in languages %}
                {% if lang.slug == 'es' or lang.slug == 'cas' %}
                    {# Botón Castellano #}
                    <a href="{{ lang.url }}" aria-label="Botón idiomas castellano"
                    class="btn {{ lang.current ? 'btn-dark' : 'btn-outline-dark' }} btn-sm  ms-2"
                    {% if lang.current %}aria-current="page"{% endif %}>
                        <span class="d-inline d-sm-none">CAS</span>
                        <span class="d-none d-sm-inline">CASTELLANO</span>
                    </a>
                {% elseif lang.slug == 'eu' or lang.slug == 'eus' %}
                    {# Botón Euskera #}
                    <a href="{{ lang.url }}" aria-label="Botón idiomas euskera"
                    class="btn {{ lang.current ? 'btn-dark' : 'btn-outline-dark' }} btn-sm ms-2"
                    {% if lang.current %}aria-current="page"{% endif %}>
                        <span class="d-inline d-sm-none">EUS</span>
                        <span class="d-none d-sm-inline">EUSKARA</span>
                    </a>
                {% endif %}
            {% endfor %}
            </div>
        {% else %}
            <div style="background: #ffeeee; padding: 10px; border: 1px solid red;">
                ❌ No se encontraron idiomas
            </div>
        {% endif %}
        </div>

        <!-- Right side: RRSS -->
        <div class="col d-flex justify-content-end">
        
            {% include "partials/btn-search.twig" with {'items': menu.get_items} %}

            <div class="btn-group m-1" role="group" aria-label="First group">
                    {% for red in redes_sociales %}
                    <a href="{{ red.url }}" 
                        class="btn btn-outline-dark btn-sm pt-0" 
                        target="_blank" 
                        rel="noopener noreferrer"
                        aria-label="Botones redes sociales cabecera"
                    >
                        {% if red.imagen %}
                            <img src="{{ red.imagen.url }}" alt="{{ red.imagen.alt }}" class="social-icon pt-1 svg-hover-white">
                        {% else %}
                            <i class="bi bi-globe"></i> {# Icono por defecto si no hay imagen #}
                        {% endif %}
                    </a>
                {% endfor %}
            </div>
        </div>

    </div>

</div>
