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