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

<div class="w3-top {{ event.get_bg_color }} grey-navbar" id="home">
    <div class="w3-bar" id="myNavbar">
        <a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);"
           onclick="toggleFunction()" title="Toggle Navigation Menu">
            //
        </a>
        <a href="{% url 'index' %}#home" class="w3-bar-item w3-button">// DOMOV</a>
        {% for section in html_sections %}
            <a href="{% url 'index' %}#{{ section.identifier }}"
               class="w3-bar-item w3-button w3-hide-small">{{ section.menu }}</a>
        {% endfor %}
        <a href="{% url 'index' %}#categories" class="w3-bar-item w3-button w3-hide-small">// TITULY a KATEGORIE</a>
        <a href="{% url 'index' %}#registration" class="w3-bar-item w3-button w3-hide-small">// REGISTRACE</a>
        <a href="{% url 'index' %}#contact" class="w3-bar-item w3-button w3-hide-small">// KONTAKT</a>



        {% if user.is_authenticated %}

            <div class="w3-dropdown-hover w3-hide-small">
                <button class="w3-button">VYSLEDKY <i class="fa fa-caret-down"></i></button>
                <div class="w3-dropdown-content w3-bar-block w3-card-4">
                    {% for c in event.categories.all %}
                        <a href="{% url 'results' c.pk %}" class="w3-bar-item w3-button">{{ c }}</a>
                    {% endfor %}
                </div>
            </div>


            {% if user.is_superuser %}
                <div class="w3-dropdown-hover w3-hide-small">
                    <button class="w3-button">ADMIN <i class="fa fa-caret-down"></i></button>
                    <div class="w3-dropdown-content w3-bar-block w3-card-4">
                        <a href="{% url 'registrations_presentation' %}" class="w3-bar-item w3-button">Prezentace</a>
                        <a href="{% url 'admin:index' %}" class="w3-bar-item w3-button">Admin</a>
                    </div>
                </div>

            {% endif %}

            <a href="{% url 'logout' %}" class="w3-bar-item w3-button w3-hide-small">LOGOUT</a>
        {% endif %}
    </div>

    <!-- Navbar on small screens -->
    <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium ">
        {% for section in html_sections %}
            <a href="{% url 'index' %}#{{ section.identifier }}" class="w3-bar-item w3-button"
               onclick="toggleFunction()">{{ section.menu }}</a>
        {% endfor %}
        <a href="{% url 'index' %}#categories" class="w3-bar-item w3-button" onclick="toggleFunction()">// TITULY a
            KATEGORIE</a>
        <a href="{% url 'index' %}#registration" class="w3-bar-item w3-button" onclick="toggleFunction()">//
            REGISTRACE</a>
        <a href="{% url 'index' %}#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">// KONTAKT</a>
        {% if user.is_authenticated %}
            {% if user.is_superuser %}
                <div class="w3-dropdown-click" id="mobileDropdown">
                    <button onclick="toggleMobileDropdown()" class="w3-button">ADMIN <i class="fa fa-caret-down"></i>
                    </button>
                    <div id="mobileDemoDropdown" class="w3-dropdown-content w3-bar-block w3-card-4 w3-animate-opacity">
                        <a href="{% url 'registrations_presentation' %}" class="w3-bar-item w3-button w3-orange"
                           onclick="toggleFunction()">Presentace</a>
                        <a href="{% url 'admin:index' %}" class="w3-bar-item w3-button w3-red"
                           onclick="toggleFunction()">Admin</a>
                    </div>
                </div>
            {% endif %}

            <a href="{% url 'logout' %}" class="w3-bar-item w3-button">LOGOUT</a>
        {% endif %}
    </div>
</div>