<nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white" id="sidenav-main">
  <div class="container-fluid">
    <!-- Toggler -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Brand -->
    <a class="navbar-brand pt-0" href="/">
      <img src="/img/brand/blue.png" class="navbar-brand-img" alt="...">
    </a>
    <!-- User -->
    <ul class="nav align-items-center d-md-none">
      <li class="nav-item dropdown">
        <a class="nav-link" 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="/img/theme/team-1-800x800.jpg">
            </span>
          </div>
        </a>
        <% include ./dropdown %>
      </li>
    </ul>
    <!-- Collapse -->
    <div class="collapse navbar-collapse" id="sidenav-collapse-main">
      <!-- Collapse header -->
      <div class="navbar-collapse-header d-md-none">
        <div class="row">
          <div class="col-6 collapse-brand">
            <a href="./index">
              <img src="/img/brand/blue.png">
            </a>
          </div>
          <div class="col-6 collapse-close">
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav">
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </div>
      <!-- Form -->
      <form class="mt-4 mb-3 d-md-none">
        <div class="input-group input-group-rounded input-group-merge">
          <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="Search" aria-label="Search">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <span class="fa fa-search"></span>
            </div>
          </div>
        </div>
      </form>
      <!-- Navigation -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/">
            <i class="ni ni-tv-2 text-primary"></i> Dashboard
          </a>
        </li>
        <% if(locals.role == 'Admin'){ %>
        <li class="nav-item">
          <a class="nav-link" href="/settings">
            <i class="ni ni-settings text-yellow"></i> Settings
          </a>
        </li>
        <% } %>
      </ul>
      <!-- Divider -->
      <hr class="my-3">
      <% if(locals.role == 'Admin'){ %>
      <!-- Heading -->
      <h6 class="navbar-heading text-muted">Users</h6>
      <!-- Navigation -->
      <ul class="navbar-nav mb-md-3">
        <li class="nav-item">
          <a class="nav-link" href="#" data-toggle="modal" data-target="#modal-new-user">
            <i class="ni ni-spaceship"></i> Tambah User Cabang
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-toggle="modal" data-target="#modal-reset-password">
            <i class="ni ni-palette"></i> Reset Password User
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/users">
            <i class="ni ni-ui-04"></i> Daftar Users
          </a>
        </li>
      </ul>
      <% } %>
    </div>
  </div>
</nav>