<!-- Header -->
<header id="js-header" class="u-header u-header--static u-header--show-hide u-header--change-appearance"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <div class="text-center text-lg-left u-header__section u-header__section--light g-bg-white g-brd-bottom g-brd-gray-light-v4 g-py-40">
    <div class="container">
      <div class="row flex-lg-row align-items-center justify-content-lg-start">
        <div class="col-lg-2 g-mb-30 g-mb-0--lg">
          <!-- Logo -->
          <a href="{{ root }}index.html" class="navbar-brand">
            <img src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
          </a>
          <!-- End Logo -->
        </div>

        <div class="col-lg-6 g-mb-30 g-mb-0--lg">
          <!-- Search Form -->
          <form id="searchform-5" class="u-searchform-v5">
            <div class="input-group g-brd-primary--focus g-rounded-20">
              <input class="form-control u-form-control u-form-control-lg g-bg-transparent" type="search" placeholder="Enter Search Keyword">

              <div class="input-group-addon">
                <button class="g-color-primary" type="submit">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
          </form>
          <!-- End Search Form -->
        </div>

        <div class="col-lg-4 g-mb-30 g-mb-0--lg">
          <div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-end g-mx-minus-15 g-mt-minus-10">
            <div class="g-px-15 g-pt-15">
              <a href="#" class="u-icon-v1 g-font-size-24 g-color-gray-light-v1 g-text-underline--none--hover g-width-30 g-height-20">
                <span class="u-badge-v1 g-color-white g-bg-primary g-rounded-50x">3</span>
                <i class="fa fa-comment-o"></i>
              </a>
            </div>

            <div class="g-px-15 g-pt-15">
              <a href="#" class="u-icon-v1 g-font-size-24 g-color-gray-light-v1 g-text-underline--none--hover g-width-30 g-height-20">
                <span class="u-badge-v1 g-color-white g-bg-primary g-rounded-50x">10</span>
                <i class="fa fa-bell-o"></i>
              </a>
            </div>

            <div class="g-px-15 g-pt-10">
              <a href="#" class="d-flex flex-row align-items-center text-left g-color-gray-dark-v4  g-text-underline--none--hover g-line-height-1_2">
                <img class="g-width-50 g-height-50 g-rounded-50x g-mr-15" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                <span class="text-uppercase g-mr-8">Julia Bailey</span>
                <i class="fa fa-angle-down g-font-size-16"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="u-header__section u-header__section--light g-bg-white g-py-15 g-py-0--lg"
       data-header-fix-moment-classes="u-shadow-v18">
    <nav class="navbar navbar-expand-lg py-0">
      <div class="container">
        <!-- Responsive Toggle Button -->
        <button class="navbar-toggler navbar-toggler-right btn g-line-height-1 g-brd-none g-pa-0 mx-auto" type="button" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navBar"
                data-toggle="collapse"
                data-target="#navBar">
          <span class="hamburger hamburger--slider">
            <span class="hamburger-box">
              <span class="hamburger-inner"></span>
            </span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Navigation -->
        <div class="collapse navbar-collapse align-items-center flex-sm-row text-center" id="navBar">
          <ul class="w-100 navbar-nav justify-content-between text-uppercase u-main-nav-v9 u-sub-menu-v1">
            <li class="nav-item{% if mainNavActive_1 == 'dashboard' %} active{% endif %}">
              <a href="#" class="nav-link">Dashboard
                {% if mainNavActive_1 == 'dashboard' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'profile' %} active{% endif %}">
              <a href="#" class="nav-link">Profile
                {% if mainNavActive_1 == 'profile' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'management' %} active{% endif %}">
              <a href="#" class="nav-link">Management
                {% if mainNavActive_1 == 'management' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'communication' %} active{% endif %}">
              <a href="#" class="nav-link">Communication
                {% if mainNavActive_1 == 'communication' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'my-money' %} active{% endif %}">
              <a href="#" class="nav-link">My Money
                {% if mainNavActive_1 == 'my-money' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'settings' %} active{% endif %}">
              <a href="#" class="nav-link">Settings
                {% if mainNavActive_1 == 'settings' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'apps' %} active{% endif %}">
              <a href="#" class="nav-link">Apps
                {% if mainNavActive_1 == 'apps' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item{% if mainNavActive_1 == 'widgets' %} active{% endif %}">
              <a href="#" class="nav-link">Widgets
                {% if mainNavActive_1 == 'widgets' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
          </ul>
        </div>
        <!-- End Navigation -->
      </div>
    </nav>
  </div>
</header>
<!-- End Header -->
