{# Footer Settings #}
{% set primaryFooter = craft.navigation.nodes('primaryFooter') %}
{% set numSocialLinks = 0 %}
{% for socialLink in socialLinks %}
    {% if socialLink | length %}
        {% set numSocialLinks = numSocialLinks + 1 %}
    {% endif %}
{% endfor %}

{% if numSocialLinks >= 8 %}
    {% set socialWrapperClasses = 'xl:flex-row xl:items-end' %}
    {% set socialLinkClasses = 'md:-ml-4 xl:mx-0' %}
{% elseif numSocialLinks >= 5 %}
    {% set socialWrapperClasses = 'lg:flex-row lg:items-end' %}
    {% set socialLinkClasses = 'md:-ml-4 lg:mx-0' %}
{% elseif numSocialLinks >= 4 %}
    {% set socialWrapperClasses = 'md:flex-row md:items-end' %}
    {% set socialLinkClasses = '' %}
{% else %}
    {% set socialWrapperClasses = 'sm:flex-row sm:items-end' %}
    {% set socialLinkClasses = '' %}
{% endif %}

{# Main Footer #}
<footer id="primaryFooter" class="primary-footer w-full relative flex flex-col justify-start items-start bg-brand-terracotta-aa">
    <div class="container-wrapper w-full relative max-w-7xl mx-auto flex flex-col justify-start items-start">
        <div class="content-wrapper w-full relative flex flex-col justify-start items-start">
            <div class="footer-top-wrapper w-full flex flex-col md:flex-row md:gap-8 justify-start items-start md:px-8 lg:px-10 {{ activateMaintenance ? 'md:justify-center' : 'md:justify-between' }}">
                <div class="logo-wrapper w-full md:w-auto flex flex-col justify-start items-start px-6 sm:px-8 md:px-0 py-8 sm:py-10 lg:py-12">
                    <a href="/" class="home-global-link-footer group active:ring-2 active:ring-white-pure active:ring-offset-2 focus:ring-2 focus:ring-white-pure focus:ring-offset-2" title="Habilitas - Home">
                        <span class="sr-only">
                            Habilitas - Home
                        </span>
                        {{ svg(globalLogo) | attr({ class: 'w-36 lg:w-44 text-white pointer-events-none' }) }}
                    </a>
                </div>
                {% if not activateMaintenance %}
                    <div class="links-wrapper w-full md:w-auto flex flex-col xs:grid xs:grid-cols-2 sm:grid-cols-3 md:flex md:flex-row md:flex-wrap justify-start sm:justify-between items-start md:py-10 lg:py-12 md:gap-8 lg:gap-10 xl:gap-12">
                        {% for navItem in primaryFooter.level(1) %}
                            <a href="{{ navItem.url }}" title="{{ navItem.title }}" class="header-link w-full sm:w-auto text-lg xl:text-xl text-white-pure font-body font-medium px-6 sm:px-8 py-3 md:p-0 transition-colors duration-700 hover:text-white-primary">
                                {{ navItem.title }}
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div class="footer-bottom-wrapper w-full flex flex-col justify-start items-start sm:mt-6 md:pl-8 lg:pl-10 lg:pr-2 {{ socialWrapperClasses }} {{ activateMaintenance ? 'md:justify-center' : 'md:justify-between' }}{{ ( not maintenanceShowNewsletter ) and activateMaintenance ? ' lg:!px-0' }}">
                {% if ( maintenanceShowNewsletter and activateMaintenance ) or ( not activateMaintenance ) %}
                    <div class="newsletter-wrapper w-full sm:w-auto lg:w-96 xl:w-120 flex flex-row justify-start items-start px-6 sm:px-8 sm:pb-6 lg:pb-8 pt-4 sm:pt-2 md:pt-0 md:px-0 lg:pt-6">
                        {% if footerNewsletterForm | length %}
                            {{ footerNewsletterForm.render({
                                attributes: {
                                    id: footerNewsletterForm.handle,
                                    class: "footer-newsletter-form relative w-full m-0 min-w-[16rem] lg:min-w-[20rem]",
                                    'data-page-title': entry.title
                                }
                            }) }}
                        {% endif %}
                    </div>
                {% endif %}
                <div class="socials-wrapper w-full sm:w-auto flex flex-row justify-start items-start pb-4 sm:pb-8 md:pb-2 lg:pb-6 sm:gap-2 lg:gap-4 {{ socialLinkClasses }}{{ numSocialLinks >= 4 ? ' flex-wrap' }}{{ activateMaintenance ? ' md:pb-8 lg:pb-10' }}{{ maintenanceShowNewsletter and activateMaintenance ? ' lg:pl-6' }}">
                    {% for socialLink in socialLinks %}
                        {% if socialLink | length %}
                            <a href="{{ socialLink.link }}" title="Click to visit us on {{ socialLink.name | capitalize }}" class="social-icon p-6 group" target="_blank" rel="noopener nofollow">
                                <span class="sr-only">
                                    Click to visit us on {{ socialLink.name | capitalize }}
                                </span>
                                {{ svg(svgPath ~ socialLink.icon) | attr({ class: 'w-8 transition-colors duration-700 text-white-pure group-hover:text-white-primary pointer-events-none' }) }}
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</footer>