{% load static %}
{% block dashboard_topbar %}


<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #36454F;">

    <img src="{% static 'images/logos/TaskCallWhiteTextLogo.svg' %}" alt="TaskCall Logo" width="84" height="21">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul id="dashboard-navbar" class="navbar-nav" style="margin-left: 1%; z-index: 2;">

            {% if nav_content.nav_incidents %}
                <li id="item-incidents" class="nav-item">
                    <a class="nav-link main-item" href="/incidents"> {{ ttl_incidents }} </a>
                </li>
            {% endif %}

            {% if nav_content.nav_configurations %}
                <li id="item-configurations" class="nav-item">
                    <a class="nav-link dropdown-toggle main-item collapsed" href="#submenuConfigurations" data-toggle="dropdown" data-target="#submenuConfigurations">
                        {{ ttl_configurations }}
                    </a>

                    <div class="sub-menu collapse" id="submenuConfigurations" aria-expanded="false">
                        <ul class="flex-column nav">
                            {% for item in nav_content.nav_configurations %}
                                <li class="nav-item">
                                    <a class="nav-link sub-item" href="{{ item.url }}"> {{ item.name }} </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </li>
            {% endif %}

            {% if nav_content.nav_analytics %}
                <li id="item-analytics" class="nav-item">
                    <a class="nav-link dropdown-toggle main-item collapsed" href="#submenuAnalytics" data-toggle="dropdown" data-target="#submenuAnalytics">
                        {{ ttl_analytics }}
                    </a>

                    <div class="sub-menu collapse" id="submenuAnalytics" aria-expanded="false">
                        <ul class="flex-column nav">
                            {% for item in nav_content.nav_analytics %}
                                <li class="nav-item">
                                    <a class="nav-link sub-item" href="{{ item.url }}"> {{ item.name }} </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </li>
            {% endif %}

            {% if nav_content.nav_advanced %}
                <li id="item-advanced" class="nav-item">
                    <a class="nav-link dropdown-toggle main-item collapsed" href="#submenuAdvanced" data-toggle="dropdown" data-target="#submenuAdvanced">
                        {{ ttl_advanced }}
                    </a>

                    <div class="sub-menu collapse" id="submenuAdvanced" aria-expanded="false">
                        <ul class="flex-column nav">
                            {% for item in nav_content.nav_advanced %}
                                <li class="nav-item">
                                    <a class="nav-link sub-item" href="{{ item.url }}"> {{ item.name }} </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </li>
            {% endif %}

        </ul>



        <ul class="navbar-nav ml-auto" style="margin-right: 2%;">
            <li class="nav-item">
                <a class="nav-link dropdown-toggle main-item collapsed" style="color: white;"
                   href="#submenuAnalytics" data-toggle="dropdown" data-target="#submenuSettings">
                    <img src="{% static 'images/app/UserAvatar.png' %}" alt="Avatar" style="vertical-align: middle; margin-right: 5px; width: 22px; height: 22px; border-radius: 50%;">
                    <span id="navUserDisplayName"> Hi </span>
                </a>

                <div class="sub-menu dropdown-menu-right collapse" id="submenuSettings" aria-expanded="false">
                    <ul class="flex-column nav">
                        <li class="nav-item px-2">
                            <a class="nav-link sub-item" href="/configurations/users/profile/mine"> {{ ttl_my_profile }} </a>
                        </li>

                        <li class="nav-item px-2">
                            <button class="btn nav-link sub-item" style="outline: none; box-shadow: none;" onclick="logoutUser()"> {{ ttl_log_out }} </button>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>
</nav>


<div class="se-pre-con" hidden></div>


{% endblock %}