
<div class="col-auto col-md-2 col-xl-2 px-sm-2 px-0 bg-dark">
    <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
        <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <span class="fs-5 d-none d-sm-inline">Device Manager</span>
        </a>
        <div class="dropdown pb-4">
            <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
                <li><a class="dropdown-item" href="#">New project...</a></li>
                <li><a class="dropdown-item" href="#">Settings</a></li>
                <li><a class="dropdown-item" href="#">Profile</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Sign out</a></li>
            </ul>
        </div>
        <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
            <li class="nav-item">
                <a href="../../home" class="nav-link align-middle px-0">
                    <i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span>
                </a>
            </li>
            <% if(user.level >= 4){%>
            <li>
                <a href="../../users"
                <% if(page == "Users"){%>
                  class="active"
                <% } %>
                class="nav-link px-0 align-middle">
                    <i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Users</span></a>
            </li>
            <% } %>
            <% if(user.level >= 4){%>
            <li>
                <a href="../../clients" class="nav-link px-0 align-middle">
                    <i class="fs-4 bi-person-lines-fill"></i> <span class="ms-1 d-none d-sm-inline">Clients</span></a>
            </li>
            <% } %>
            <% if(user.level >= 3){%>
            <li>
              <a href="../../projects"
              <% if(page == "Projects"){%>
                class="active"
              <% } %>
              class="nav-link px-0 align-middle">
              <i class="fs-4 bi-cpu"></i> <span class="ms-1 d-none d-sm-inline">Projects</span></a>
            </li>
            <% } %>
            <% if(user.level >= 3){%>
            <li>
              <a href="../../models"
              <% if(page == "Models"){%>
                class="active"
              <% } %>
              class="nav-link px-0 align-middle">
              <i class="fs-4 bi-cpu"></i> <span class="ms-1 d-none d-sm-inline">Models</span></a>
              <ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
                <li class="w-100">
                  <a href="./dashboard"
                  class="nav-link px-0<% if(page == 'Dashboard'){%> active<% } %>"> <span class="d-sm-none">Da</span><span class="d-none d-sm-inline">Dashboard</span></a>
                </li>
                <li class="w-100">
                  <a href="./devices"
                  <% if(page == "Devices"){%>
                    class="active"
                  <% } %>
                class="nav-link px-0"> <span class="d-sm-none">De</span><span class="d-none d-sm-inline">Devices</span></a>
                </li>
                <% if(user.level >= 4){%>
                <li class="w-100">
                  <a href="./settings"
                  <% if(page == "Settings"){%>
                    class="active"
                  <% } %>
                  class="nav-link px-0"> <span class="d-sm-none">Se</span><span class="d-none d-sm-inline">Settings</span></a>
                </li>
                <%}%>
                <% if(user.level >= 4){%>
                <li class="w-100">
                  <a href="./sensors"
                  <% if(page == "Sensors"){%>
                    class="active"
                  <% } %>
                  class="nav-link px-0"> <span class="d-sm-none">Se</span><span class="d-none d-sm-inline">Sensors</span></a>
                </li>
                <%}%>
                <% if(user.level >= 4){%>
                <li class="w-100">
                  <a href="./actuators"
                  <% if(page == "Actuators"){%>
                    class="active"
                  <% } %>
                  class="nav-link px-0"> <span class="d-sm-none">Ac</span><span class="d-none d-sm-inline">Actuators</span></a>
                </li>
                <%}%>
                <% if(user.level >= 4){%>
                <li class="w-100">
                  <a href="./access"
                  <% if(page == "Access"){%>
                    class="active"
                  <% } %>
                  class="nav-link px-0"> <span class="d-sm-none">Ac</span><span class="d-none d-sm-inline">Access</span></a>
                </li>
                <%}%>
                <% if(user.level >= 4 && model.fw_enabled){%>
                <li class="w-100">
                  <a href="./firmwares"
                  <% if(page == "Firmwares"){%>
                    class="active"
                  <% } %>
                  class="nav-link px-0"> <span class="d-sm-none">Fi</span><span class="d-none d-sm-inline">Firmwares</span></a>
                </li>
                <%}%>
                <% if(user.level >= 4){%>
                <li class="w-100">
                  <a href="./variants"
                  <% if(page == "Variants"){%>
                    class="active"
                  <% } %>
                  class="nav-link px-0"> <span class="d-sm-none">Va</span><span class="d-none d-sm-inline">Variants</span></a>
                </li>
                <%}%>
              </ul>
            </li>
            <% } %>
            <li>
                <!--<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">-->
                <a href="../../devices" class="nav-link px-0 align-middle">
                <i class="fs-4 bi-phone"></i> <span class="ms-1 d-none d-sm-inline">Devices</span> </a>
            </li>
            <!--
            <li>
                <a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
                    <i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
                <ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
                    <li class="w-100">
                        <a href="#" class="nav-link px-0"> <span class="d-sm-none">It</span><span class="d-none d-sm-inline">Item</span> 1</a>
                    </li>
                    <li>
                        <a href="#" class="nav-link px-0"> <span class="d-sm-none">It</span><span class="d-none d-sm-inline">Item</span> 2</a>
                    </li>
                </ul>
            </li>
            -->
            <!--
            <li>
                <a href="#" class="nav-link px-0 align-middle">
                    <i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
            </li>
            -->
        </ul>
        <hr>
        <div class="dropdown pb-4">
            <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
              <img src=<%= user.avatar %> alt="hugenerd" width="30" height="30" class="rounded-circle">
              <span class="d-none d-sm-inline mx-1"><%= user.name %></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-dark text-small shadow">
                <li><a class="dropdown-item" href="../../profile">Profile</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="../../logout">Sign out</a></li>
            </ul>
        </div>
    </div>
</div>
