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

<div class="nav">
    <div class="uk-container">
        <nav class="uk-navbar uk-navbar-container uk-navbar-transparent">
            <div class="uk-navbar-left">
                <div class="uk-navbar-item uk-padding-remove-horizontal">
                    <a class="uk-logo uk-border-rounded" title="Logo" href="{% url 'gnous_eu:index' %}">
                        <img src="{% static 'images/gnous.svg' %}" alt="Logo">
                    </a>
                </div>
                <ul class="uk-navbar-nav uk-visible@s">
                    <li>
                        <a href="{% url 'gnous_eu:index' %}"
                           class="uk-text-bolder {% if request.resolver_match.url_name == 'index' %} active {% endif %}">
                            {% trans "Accueil" %}
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'gnous_eu:services' %}"
                           class="uk-text-bolder {% if request.resolver_match.url_name == 'services' %} active {% endif %}">
                            {% trans "Services" %}
                        </a>
                    </li>
                </ul>
            </div>
            <div class="uk-navbar-right">
                <ul class="uk-navbar-nav uk-visible@s">
                    <li>
                        <a href="{% url 'gnous_eu:about' %}"
                           class="uk-text-bolder {% if request.resolver_match.url_name == 'about' %} active {% endif %}">
                            {% trans "À propos" %}
                        </a>
                    </li>
                    <li>
                        <a href="{% url 'gnous_eu:tips' %}"
                           class="uk-text-bolder {% if request.resolver_match.url_name == 'tips' %} active {% endif %}">
                            {% trans "Donner" %}
                        </a>
                    </li>
                </ul>
                <div class="uk-navbar-item uk-visible@s">
                    <form action="{% url 'set_language' %}" method="post">
                        {% csrf_token %}
                        {% get_current_language as LANGUAGE_CODE %}
                        {% if LANGUAGE_CODE == 'en' %}
                            <button type="submit" style="background: transparent; border: none">
                                <img src="{% static 'images/icons/fr.svg' %}" alt="fr" width="18vw">
                            </button>
                            <input type="hidden" name="language" value="fr">
                        {% else %}
                            <button type="submit" style="background: transparent; border: none">
                                <img src="{% static 'images/icons/en.svg' %}" alt="en" width="18vw">
                            </button>
                            <input type="hidden" name="language" value="en">
                        {% endif %}
                    </form>
                </div>

                <a class="uk-navbar-toggle uk-navbar-item uk-hidden@s">
                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="navbar-toggle-icon">
                        <rect y="9" width="20" height="2"></rect>
                        <rect y="3" width="20" height="2"></rect>
                        <rect y="15" width="20" height="2"></rect>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</div>