{% load static %}
{% load ndr_values %}
{% load i18n %}

{% config_value 'footer_show_partners' as show_partners %}
{% config_value 'footer_show_main_navigation' as show_navigation %}
{% config_value 'footer_show_socials' as show_socials %}
{% translated_config_value 'footer_copyright_text' as footer_copyright_text %}

<div style="width:100%; left:0; right: 0; position:absolute; padding-top: 50px;">
    <footer class="pt-3 pb-3 mt-3 footer-bg">
        <div class="container">
            <div class="row">
                <div class="col-2">
                    <a href="/">
                        <img src="{% logo_image_path %}" class="img-fluid">
                    </a>
                </div>
                <div class="col-6 offset-2">
                    {% if show_navigation %}
                        <ul class="navbar-nav mr-auto navbar-ul-items">
                            {% for nav_item in navigation %}
                                <li class="nav-item">
                                    <a href="{{ nav_item.url }}" target="_blank">{{ nav_item.translated_label }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>

                <div>
                    {% if show_socials %}
                        {% config_value 'socials_twitter' as socials_twitter %}
                        {% config_value 'socials_instagram' as socials_instagram %}
                        {% config_value 'socials_facebook' as socials_facebook %}
                        {% config_value 'socials_mastodon' as socials_mastodon %}
                        {% if socials_twitter or socials_instagram or socials_facebook or socials_mastodon %}
                            {% translate 'Connect' %}
                        {% endif %}
                        <div class="col-0">
                            <div class="">
                                {% if socials_twitter %}
                                    <a class="link-bottom" href="{{ socials_twitter }}" target="_blank">
                                        <i class="fa-brands fa-twitter"></i>
                                    </a>
                                {% endif %}

                                {% if socials_instagram %}
                                    <a class="link-bottom" href="{{ socials_instagram }}" target="_blank">
                                        <i class="fa-brands fa-instagram"></i>
                                    </a>
                                {% endif %}

                                {% if socials_facebook %}
                                    <a class="link-bottom" href="{{ socials_facebook }}" target="_blank">
                                        <i class="fa-brands fa-facebook"></i>
                                    </a>
                                {% endif %}

                                {% if socials_mastodon %}
                                    <a class="link-bottom" href="{{ socials_mastodon }}" target="_blank">
                                        <i class="fa-brands fa-mastodon"></i>
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </footer>
    {% if show_partners %}
        <footer>
            <div class="container pt-5">
                <div class="row align-items-center">
                    {% for partner in partners %}
                        <div class="col-sm text-center">
                            {% if partner.url %}
                                <a href="{{ partner.url }}">
                                    <img src="{{ partner.image.url }}" class="img-fluid" style="max-height: 100px;">
                                </a>
                            {% else %}
                                <img src="{{ partner.image.url }}" class="img-fluid">
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>

            <p class="text-muted font-italic small text-center">{{ footer_copyright_text }}</p>
        </footer>
{% endif %}
    </div>