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

<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true;" class="uk-offcanvas">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
        <button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close=""></button>

        <ul class="uk-nav uk-nav-default">
            <li>
                <a href="{% url 'gnous_eu:index' %}"
                   class="uk-text-bolder"
                        {% if request.resolver_match.url_name == 'index' %} style="text-decoration: underline" {% endif %}>
                    <span class="uk-margin-small-right uk-icon" data-uk-icon="world"></span> {% trans "Accueil" %}
                </a>
            </li>
            <li>
                <a href="{% url 'gnous_eu:services' %}"
                   class="uk-text-bolder"
                        {% if request.resolver_match.url_name == 'services' %} style="text-decoration: underline" {% endif %}>
                    <span class="uk-margin-small-right uk-icon" data-uk-icon="grid"></span> {% trans "Services" %}
                </a>
            </li>
            <li>
                <a href="{% url 'gnous_eu:about' %}"
                   class="uk-text-bolder"
                        {% if request.resolver_match.url_name == 'about' %} style="text-decoration: underline" {% endif %}>
                    <span class="uk-margin-small-right uk-icon" data-uk-icon="info"></span> {% trans "À propos" %}
                </a>
                <a href="{% url 'gnous_eu:tips' %}"
                   class="uk-text-bolder"
                        {% if request.resolver_match.url_name == 'tips' %} style="text-decoration: underline" {% endif %}>
                    <span class="uk-margin-small-right uk-icon" data-uk-icon="credit-card"></span> {% trans "Donner" %}
                </a>
            </li>
            <li class="uk-nav-divider"></li>
            <li>
                <form action="{% url 'set_language' %}" method="post" name="languageForm2">
                    {% csrf_token %}
                    {% get_current_language as LANGUAGE_CODE %}
                    {% if LANGUAGE_CODE == 'en' %}
                        <img src="{% static 'images/icons/fr.svg' %}" alt="en" onclick="window.document.languageForm2.submit()" width="18vw">
                        <input type="hidden" name="language" value="fr">
                    {% else %}
                        <img src="{% static 'images/icons/en.svg' %}" alt="fr" onclick="window.document.languageForm2.submit()" width="18vw">
                        <input type="hidden" name="language" value="en">
                    {% endif %}
                </form>
            </li>
        </ul>
    </div>
</div>