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

<section class="header">
    <div>
        <a href="{% url "index" %}" class="logo">
            <img src="{% static 'fellchensammlung/img/logo_transparent.png' %}" alt="{% trans 'Notfellchen Logo' %}">
        </a>
    </div>

    <div class="profile-card">
        <div id="header-change-language">
            {% include "fellchensammlung/forms/change_language.html" %}
        </div>
        {% if user.is_authenticated %}
            <div class="btn2 button_darken btn-notification">
                <a href="{{ user.get_notifications_url }}">
                    <i class="fa fa-bell" aria-hidden="true"></i>
                </a>
                {% if user.get_num_unread_notifications > 0 %}
                    <span class="button__badge">{{ user.get_num_unread_notifications }}</span>
                {% endif %}
            </div>

            <a class="btn2" href="{% url 'user-me' %}"><i aria-hidden="true" class="fas fa-user"></i></a>
            <form class="btn2 button_darken" id="header-sign-out" action="{% url 'logout' %}" method="post">
                {% csrf_token %}
                <button class="button" type="submit"><i aria-hidden="true" class="fas fa-sign-out"></i></button>
            </form>
        {% else %}
            <a class="btn2" href="{% url "django_registration_register" %}">{% translate "Registrieren" %}</a>
            <a class="btn2" href="{% url "login" %}"><i class="fa fa-sign-in" aria-label="Login"></i></a>
        {% endif %}
        <input id="menu-toggle" type="checkbox"/>
        <label class='menu-button-container' for="menu-toggle">
            <div class='menu-button'></div>
        </label>

        <nav id="main-menu">
            <ul class="menu">
                <li>
                    <a class="nav-link " href="{% url "search" %}">
                        <i class="fas fa-search"></i> {% translate 'Suchen' %}
                    </a>
                </li>
                <li><a class="nav-link " href="{% url "add-adoption" %}"><i
                        class="fas fa-feather"></i> {% translate 'Vermittlung hinzufügen' %}</a></li>
                <li><a class="nav-link " href="{% url "about" %}"><i
                        class="fas fa-info"></i> {% translate 'Über uns' %}
                </a>
                </li>
                <li><a class="nav-link " href="{% url "rss" %}"><i
                        class="fa-solid fa-rss"></i> {% translate 'RSS' %}
                </a>
                </li>
            </ul>
        </nav>
    </div>
</section>
