<footer class="rtds-footer{% if bgColor %} {{ bgColor }}{% endif %}{% if borderClasses %} {{ borderClasses }}{% endif %}">
    {% block logosArea  %}
        {% if hasLogoArea %}
        {% render '@logos-area', { mainLogo: 'false', heading: 'Titolo sezione footer' }, true %}
        {% endif %}
    {% endblock logosArea %}


    {% block navigationRow %}
    <div class="rtds-footer__navigation-row rtds-container rtds-grid rtds-gap-x-10 rtds-gap-y-4 md:rtds-flex">
        {% block navigationRowContent %}
            <!-- Right block -->
            {% if navigationRow == 'extended' %}
            {# Three columns - To be implemented dynamic number of columns #}
            <div class="rtds-py-5 lg:rtds-py-6 rtds-grid md:rtds-grid-cols-2 lg:rtds-grid-cols-4 rtds-gap-8 lg:rtds-gap-x-14 lg:rtds-gap-y-12 rtds-w-full">
                <h2 class="rtds-sr-only">Intranet - Sezioni</h2>
                {% for i in range(0, 6) %}
                <div class="rtds-basis-full md:rtds-basis-1/2 lg:rtds-basis-full">
                    <nav aria-labelledby="footerMainNav{{ i }}">
                        <h3 id="footerMainNav{{ i }}" class="rtds-heading-4 rtds-mb-4">Lorem ipsum</h3>
                        <ul class="rtds-flex rtds-flex-col rtds-gap-3">
                            <li>
                                <a href="" class="rtds-link rtds-font-medium rtds-content-03 rtds-text-sm">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                            </li>
                            <li>
                                <a href="" class="rtds-link rtds-font-medium rtds-content-03 rtds-text-sm">link</a>
                            </li>
                            <li>
                                <a href="" class="rtds-link rtds-font-medium rtds-content-03 rtds-text-sm">link</a>
                            </li>
                            <li>
                                <a href="" class="rtds-link rtds-font-medium rtds-content-03 rtds-text-sm">link</a>
                            </li>
                        </ul>
                    <nav>
                </div>
                {% endfor %}

               {# <div class="rtds-basis-full md:rtds-basis-1/2 lg:rtds-basis-full">
                    <div class="rtds-flex rtds-flex-col rtds-gap-8">
                        <h2 class="rtds-text-lg">Titolo</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit proin bibendum ut purus vitae pharetra.</p>
                        {% render '@button', {label:'Link', href: '#' }, true %}
                    </div>
                </div>
                #}
            </div>
            {% endif %}

            {% if navigationRow == 'minimal' %}
            <div class="rtds-grid rtds-gap-6 md:rtds-gap-3 md:rtds-flex-1">
                <!-- Menu footer  -->
                <nav class="rtds-pb-4 -rtds-ml-4" aria-label="Contatti e utilità">
                    <ul class="rtds-grid md:rtds-flex rtds-gap-y-3 md:rtds-gap-y-4 rtds-flex-wrap">
                        {% for navItem in navItems %}
                        <li class="rtds-group md:rtds-border-r md:rtds-border-gray-01 md:last:rtds-border-r-0">
                            <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-02 rtds-font-bold rtds-uppercase">{{ navItem.label }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </nav>

            </div>
            {% endif %}
            {% endblock navigationRowContent %}
    </div>
    {% endblock navigationRow %}

    {% block infoRow %}
        {% if hasInfoRow %}
            <div class="rtds-border-t rtds-border-gray-01">
                <div class="rtds-container">
                    <!-- Menu footer  -->
                    <nav class="-rtds-ml-4 rtds-py-4 md:rtds-py-6" aria-label="Altre informazioni">
                        <ul class="rtds-grid md:rtds-flex rtds-gap-y-3 md:rtds-gap-y-4 rtds-flex-wrap">
                            {% for navInfoItem in navInfoItems %}
                            <li class="rtds-group">
                                <a href="" class="rtds-link rtds-px-4 rtds-py-2 rtds-text-sm rtds-content-03 rtds-font-bold">{{ navInfoItem.label }}</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
            </div>
        {% endif %}
    {% endblock infoRow %}
    
    {% block bottomBar %}
        {% if hasBottomBar %}
            <!-- Footer bottom bar -->
            <div class="rtds-footer__bottom-bar">
            
                <div class="{% block bottomBarContentClasses %}rtds-container rtds-grid rtds-gap-6 md:rtds-flex rtds-items-center rtds-justify-between{% endblock bottomBarContentClasses %}">
                    
                    {% block bottomBarContentLeft %}
                    
                    <div class="rtds-footer__bottom-bar-left">
                        <!-- Utilities and other -->
                        <nav class="-rtds-ml-4" aria-label="Informazioni legali, privacy e cookie">
                            <ul class="rtds-flex rtds-gap-y-3 rtds-gap-x-5 md:rtds-gap-y-1 rtds-flex-wrap">
                                {% for bottomNavItem in bottomNavItems %}
                                    <li>
                                        <a href="" class="rtds-link rtds-py-1 rtds-px-3 md:rtds-py-4 rtds-content-01 rtds-text-sm rtds-font-bold">{{ bottomNavItem.label }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </nav>
                    </div>
                    {% endblock bottomBarContentLeft %}

                    {% block bottomBarContentCenter %}

                    {% endblock bottomBarContentCenter %}

                    {% block bottomBarContentRight %}
                    <div class="rtds-footer__bottom-bar-right rtds-px-2 md:rtds-px-0">
                        {% block bottomBarContentRightLogo %}
                        <!-- Logos -->
                        {% render '@logo', { size: 'rtds-w-40 rtds-h-auto md:rtds-w-44 lg:rtds-w-auto', width: '223', height: '76', alt: 'Img alt'}, true %}
                        {% endblock bottomBarContentRightLogo %}
                    </div>
                    {% endblock bottomBarContentRight %}

                </div>
  
            </div>
        {% endif %}
    {% endblock bottomBar %}
</footer>