<nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Search form -->
      
      <form class="navbar-search navbar-search-light form-inline mr-sm-3" id="navbar-search-main">
        <h1 style="color: aliceblue; font-weight: bold;">OpsCenter</h1>
      </form>
      <div class="media-body text-center d-none d-lg-block">
        <span style="font-size: large; color: white; font-family: Times New Roman; font-weight: bold;">
          {% if cloudName %}
            {{ cloudName|upper }}
          {% else %}
          {% endif %}
        </span>
        <br>
        <span>
          {% if color %}
          <a class="user" data-id="{{res}}" style="cursor: pointer;">
          <i class="fas fa-circle text-{{color}} mr-3"></i>
          <u style="color: black;">{{color | capitalize_first_letter}}</u>
        </a>
        {% else %}
        {% endif %}
      </span>
      </div>
      

      <!-- <h1 style="color: black;">{{cloudName}}</h1> -->
      
      <!-- Navbar links -->
      <ul class="navbar-nav align-items-center  ml-md-auto ">
        <li class="nav-item d-xl-none">
          <!-- Sidenav toggler -->
          <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
            <div class="sidenav-toggler-inner">
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
            </div>
          </div>
        </li>
        <li class="nav-item d-sm-none">
          <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
            <i class="ni ni-zoom-split-in"></i>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
        <li class="nav-item dropdown">
          <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="media align-items-center">
              <!-- <span class="avatar avatar-sm rounded-circle">
                <img alt="Image placeholder" src="/static/assets/img/theme/teams-4.jpg">
              </span> -->
              <div class="media-body  ml-2  d-none d-lg-block">
                <span class="mb-0 text-sm  font-weight-bold">
                  {{ session['username']|title }}
                  <!-- poorna -->
                </span>
              </div>
            </div>
          </a>
          <div class="dropdown-menu  dropdown-menu-right ">
            <div class="dropdown-header noti-title">
              <h6 class="text-overflow m-0">Welcome!</h6>
            </div>
            {% if session['accesstype'] == "admin" %}
            <div class="dropdown-divider"></div>
            <a href="{{ url_for('admin.dashboard') }}" class="dropdown-item">
              <i class="ni ni-tv-2"></i>
              <span>Dashboard</span>
            </a>
            <a href="{{ url_for('authentication_blueprint.deleted_users') }}" class="dropdown-item">
              <i class="ni ni-fat-add"></i>
              <span>Manage Users</span>
            </a>
            {% endif %}
            <div class="dropdown-divider"></div>
            <a href="{{ url_for('authentication_blueprint.logout') }}" class="dropdown-item">
              <i class="ni ni-user-run text-red"></i>
              <span>Logout</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>