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

<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true;" class="uk-offcanvas" style="display: block">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
        <button class="uk-offcanvas-close uk-icon uk-close" type="button">
            <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon">
                <line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line>
                <line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line>
            </svg>
        </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>