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


<nav class="navbar navbar-expand-sm navbar-dark px-3 dashboard-topbar-bg">

    <img src="{% static 'images/logos/TaskCallWhiteTextLogo.svg' %}" alt="TaskCall Logo" width="76" height="19" class="mx-3">

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-3 z-index-1020">

            {% 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_alerts %}
                <li id="item-alerts" class="nav-item">
                    <a class="nav-link main-item" href="/alerts"> {{ ttl_alerts }} </a>
                </li>
            {% endif %}

            {% if nav_content.nav_configurations %}
                <li id="item-configurations" class="nav-item dropdown">
                    <a class="nav-link main-item dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ ttl_configurations }}
                    </a>
                    <ul class="dropdown-menu sub-menu py-2">
                        {% for item in nav_content.nav_configurations %}
                            <li class="nav-item">
                                <a class="nav-link sub-item dropdown-item" href="{{ item.url }}"> {{ item.name }} </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}

            {% if nav_content.nav_automation %}
                <li id="item-automation" class="nav-item dropdown">
                    <a class="nav-link main-item dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ ttl_automation }}
                    </a>
                    <ul class="dropdown-menu sub-menu py-2">
                        {% for item in nav_content.nav_automation %}
                            <li class="nav-item">
                                <a class="nav-link sub-item dropdown-item" href="{{ item.url }}"> {{ item.name }} </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}

            {% if nav_content.nav_itsm %}
                <li id="item-itsm" class="nav-item dropdown">
                    <a class="nav-link main-item dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ ttl_itsm }}
                    </a>
                    <ul class="dropdown-menu sub-menu py-2">
                        {% for item in nav_content.nav_itsm %}
                            <li class="nav-item">
                                <a class="nav-link sub-item dropdown-item" href="{{ item.url }}"> {{ item.name }} </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}

            {% if nav_content.nav_analytics %}
                <li id="item-analytics" class="nav-item dropdown">
                    <a class="nav-link main-item dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ ttl_analytics }}
                    </a>
                    <ul class="dropdown-menu sub-menu py-2">
                        {% for item in nav_content.nav_analytics %}
                            <li class="nav-item">
                                <a class="nav-link sub-item dropdown-item" href="{{ item.url }}"> {{ item.name }} </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}

        </ul>


        <ul class="navbar-nav ms-auto">
            <li class="nav-item dropdown">
                <a class="nav-link main-item dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <span id="navUserAvatar"> </span>
                    <span id="navUserDisplayName"> Hi </span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end sub-menu py-2">
                    {% if nav_content.nav_owner %}
                        {% for item in nav_content.nav_owner %}
                            <li class="nav-item px-2">
                                <a class="nav-link sub-item dropdown-item" href="{{ item.url }}"> {{ item.name }} </a>
                            </li>
                        {% endfor %}
                    {% endif %}

                    <li class="nav-item px-2">
                        <a class="nav-link sub-item dropdown-item" href="/configurations/users/profile/mine"> {{ ttl_my_profile }} </a>
                    </li>
                    <li class="nav-item px-2">
                        <a class="nav-link sub-item dropdown-item" href="/configurations/users/on-call-shifts/mine"> {{ ttl_my_on_call_shifts }} </a>
                    </li>
                    <li class="nav-item px-2">
                        <a class="nav-link sub-item dropdown-item" target="_blank" href="/support"> {{ ttl_support }} </a>
                    </li>
                    <li class="nav-item px-2">
                        <button id="btnLogoutUser" class="btn nav-link sub-item dropdown-item w-100"> {{ ttl_log_out }} </button>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</nav>


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

{% include 'message_section.html' %}

{% endblock %}