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


<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" tabindex="0" href="{% url 'index' %}">
            <img src="{% static 'fellchensammlung/img/logo_transparent.png' %}" alt="{% trans 'Notfellchen Logo' %}">
            <h1 class="title is-4">notfellchen.org</h1>
        </a>

        <a role="button" class="navbar-burger" aria-label="{% trans 'Hauptmenü' %}" tabindex="0" aria-expanded="false"
           data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item" href="{% url 'search' %}">
                <i class="fas fa-search fa-fw"></i> {% translate 'Suchen' %}
            </a>

            <a class="navbar-item" href="{% url "add-adoption" %}">
                <i class="fas fa-feather fa-fw"></i> {% translate 'Vermittlung hinzufügen' %}
            </a>


        </div>
        <div class="navbar-end">
            {% if user.is_authenticated %}
                <div class="navbar-item">
                    <div class="notification-container">
                        <a class="notification-label" href="{% url 'user-notifications' %}">
                            <i class="fas fa-bell fa-fw"></i>
                        </a>
                        {% if request.user.get_num_unread_notifications > 0 %}
                            <span class="notification-badge">{{ request.user.get_num_unread_notifications }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="navbar-item">
                    <a href="{% url 'user-me' %}">
                        <i class="fas fa-user fa-fw"></i> {{ user }}
                    </a>
                </div>
            {% else %}
                <div class="navbar-item">
                    <div class="buttons">
                        <a class="button is-primary" href="{% url "account_signup" %}">
                            <strong>{% translate "Registrieren" %}</strong>
                        </a>
                        <a class="button is-light" href="{% url "account_login" %}">
                            <strong>{% translate "Login" %}</strong>
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</nav>