{% assign person-id = include.person-id | default: 12 | minus: 1 %}
{% assign person = site.data.people[person-id] %}

<a class="layout-toggler" data-toggle="menubar">
   <span class="layout-toggler-icon"></span>
</a>

<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
   {% if include.icon %}<span class="text-green">{% include_cached ui/icon.html icon=include.icon %}</span>{% endif %}
   {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
   {% if include.logo %}
      <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
      <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
   {% endif %}
   {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>

<ul class="nav navbar-menu align-items-center order-1 order-lg-2">

   {% if include.notifications %}
   <li class="nav-item dropdown mr-3">
      <a class="nav-link text-reset px-2" data-toggle="dropdown">
         {% include_cached ui/icon.html icon="bell" %}
         <span class="badge badge-pill badge-up bg-primary">4</span>
      </a>
      <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
         <div class="scrollable">
            <div class="list list-row">
            </div>
         </div>
         <div class="d-flex px-3 py-2 b-t">
            <div class="flex">
               <span>6 Notifications</span>
            </div>
            <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
         </div>
      </div>
   </li>
   {% endif %}

   <li class="nav-item d-none d-lg-flex mr-3">
      <a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
   </li>

   {% if include.user-menu %}
   <li class="nav-item dropdown">
      <a href="#" data-toggle="dropdown"
         class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
         {% include ui/avatar.html src=person.photo %}
         <span class="ml-2 d-none d-lg-block leading-none">
            {{ person.full_name }}
            <span class="text-muted d-block mt-1 text-h6">Administrator</span>
         </span>
      </a>
      <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
         <a class="dropdown-item" href="#">
            {% include_cached ui/icon.html icon="user" class="dropdown-icon" %} Profile
         </a>
         <a class="dropdown-item" href="#">
            {% include_cached ui/icon.html icon="settings" class="dropdown-icon" %} Settings
         </a>
         <a class="dropdown-item" href="#">
            {% include_cached ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
            <span class="badge bg-primary ml-auto">6</span>
         </a>
         <a class="dropdown-item" href="#">
            {% include_cached ui/icon.html icon="send" class="dropdown-icon" %} Message
         </a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">
            {% include_cached ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
         </a>
         <a class="dropdown-item" href="#">
            {% include_cached ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
         </a>
      </div>
   </li>
   {% endif %}

   {% if include.manage %}
   <li class="nav-item">
      <a href="#" class="btn btn-secondary">Manage Widgets</a>
   </li>
   {% endif %}

   {% if include.register %}
   <li class="nav-item ">
      <a href="#" class="nav-link">
         Sign in
      </a>
   </li>
   <li class="d-flex align-items-center">
      <a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
         Register
      </a>
   </li>
   {% endif %}

   {% if include.plus %}
   <li class="nav-item">
      <a href="#" class="btn btn-primary btn-icon">{% include_cached ui/icon.html icon="plus" %}</a>
   </li>
   {% endif %}

   {% if include.premium %}
   <li class="nav-item">
      <a href="#" class="btn btn-success">Go Premium</a>
   </li>
   {% endif %}

   {% if include.sync %}
   <li class="nav-item">
      <a href="#" class="btn btn-secondary">{% include_cached ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
   </li>
   {% endif %}
</ul>