<div class="container">
  <nav class="navbar navbar-dark bg-inverse">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-toggleable-xs" id="navbar-header">
      <a class="navbar-brand" href="/">{{config.appName}}</a>
      <ul class="nav navbar-nav">

        <li class="nav-item{% if req.url == '/' %} active{% endif %}">
          <a class="nav-link" href="/">Home {% if req.url == '/' %} <span class="sr-only">(current)</span>{% endif %}</a>
        </li>

        {# these links show in all pages (regardless if you're logged in or not) #}
        {% for link in [ 'about' ] %}
          <li class="nav-item{% if req.url.indexOf('/' + link) == 0 or (req.url == '/' and link == 'home') %} active{% endif %}">
            <a class="nav-link" href="{{ '/' + link }}">{{ s.titleize(link) }}{% if req.url.indexOf('/' + link) == 0 or (req.url == '/' and link == 'home') %} <span class="sr-only">(current)</span>{% endif %}</a>
          </li>
        {% endfor %}

        <div class="pull-xs-right">

          {# links that show only if you're logged in #}
          {% if user %}

            <li class="nav-item{% if req.url.indexOf('/my-account') == 0 %} active{% endif %}">
              <a class="nav-link" href="/my-account">
                <img class="img-circle" src="{{ user.avatar_url }}" alt="My Account" height="25" /> {{ user.display_name }}{% if req.url.indexOf('/my-account') == 0 %} <span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>

            {# links that show if you're an admin #}
            {% if user.group == 'admin' %}
              <li class="nav-item{% if req.url.indexOf('/admin') == 0 %} active{% endif %}">
                <a class="nav-link" href="/admin">Admin{% if req.url.indexOf('/admin') == 0 %} <span class="sr-only">(current)</span>{% endif %}</a>
              </li>
            {% endif %}

            <li class="nav-item">
              <a class="nav-link" href="/logout">Log out</a>
            </li>

          {% else %}

            {# links that show only if you're logged out #}
            <li class="nav-item">
              <a class="nav-link" href="/login">Log in</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/signup">Sign up</a>
            </li>

          {% endif %}

        </div>

      </ul>
    </div>
  </nav>
</div>
