{% load footer_templatetags %}

<div class="footer d-print-none">
    <div class="color-bar">
        <div class="vote-bg-green width-percent-52"></div>
        <div class="vote-bg-lime width-percent-26"></div>
        <div class="vote-bg-yellow width-percent-13"></div>
        <div class="vote-bg-orange width-percent-6"></div>
        <div class="vote-bg-red width-percent-3"></div>
    </div>
    <nav class="navbar navbar-expand">
        <div class="collapse navbar-collapse justify-content-between">
            <ul class="navbar-nav justify-content-start">
                <li class="nav-item my-auto">
                    <a class="nav-link nav-link-multiline" href="{% legal_link %}">
                        <span>{% translate 'Legal Notice' %}</span>
                        <span class="fas fa-arrow-up-right-from-square ps-1"></span>
                    </a>
                </li>
                <li class="d-none d-sm-block nav-item">
                    <a class="nav-link" href="https://github.com/e-valuation/EvaP/releases/tag/{% release_version %}" target="_blank">
                        <span> Version: {% release_version %} </span>
                        <span class="fas fa-arrow-up-right-from-square ps-1"></span>
                    </a>
                </li>
            </ul>
            <div class="d-none d-lg-block navbar-nav justify-content-center text-center">
                <span class="fst-italic">{{ slogan }}</span>
            </div>
            <div class="navbar-nav justify-content-end feedback-button-placeholder">
                {% if user.is_authenticated %}
                    <span class="feedback-button">
                        <button id="feedbackModalShowButton" type="button" class="btn btn-dark">
                            {% translate 'Problems/Feedback' %}
                        </button>
                    </span>
                {% endif %}
            </div>
        </div>
    </nav>
</div>