<div class="navbar navbar-expand-sm navbar-dark {{ navbarClass or '' }} pr-0 pr-md-16pt" id="default-navbar" data-primary>

  <!-- Navbar toggler -->
  <button class="navbar-toggler navbar-toggler-right d-block d-md-none" type="button" data-toggle="sidebar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar Brand -->
  <a href="index.html" class="navbar-brand">
    <img class="navbar-brand-icon mr-0 mr-md-8pt" src="assets/images/logo/white-100@2x.png" width="30" alt="{{ brand }}">
    <span class="d-none d-md-block">{{ brand }}</span>
  </a>

  <button class="btn btn-black mr-16pt" data-toggle="modal" data-target="#courses">Courses <i class="material-icons">arrow_drop_down</i></button>

  <form class="search-form search-form--black search-form-courses d-none d-md-flex" action="{{ prefix }}library-filters.html">
    <input type="text" class="form-control" placeholder="What would you like to learn?">
    <button class="btn" type="submit" role="button"><i class="material-icons">search</i></button>
  </form>

  <!-- Main Navigation -->
  {% if not 'instructor' in slug and not 'student' in slug %}
    <ul class="nav navbar-nav ml-auto flex-nowrap" style="white-space: nowrap;">
      <li class="ml-16pt nav-item{% if (slug === 'login') %} active{% endif %}">
        <a href="login.html" class="nav-link">
          <i class="material-icons">lock_open</i>
          <span class="sr-only">Login</span>
        </a>
      </li>
      <li class="d-none d-sm-flex nav-item{% if (slug === 'signup') %} active{% endif %}">
        <a href="pricing.html" class="btn btn-accent">Get started</a>
      </li>
    </ul>
  {% endif %}

  {% if 'instructor' in slug or 'student' in slug %}
    <nav class="nav navbar-nav ml-auto flex-nowrap">
      {% include 'layouts/_account-dropdown.html' %}
    </nav>
  {% endif %}
  <!-- // END Main Navigation -->

</div>