<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{#if user}}/webmail{{else}}/{{/if}}">
              <img alt="{{serviceName}}" src="/favicon-32x32.png" width="20" height="20">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">

                {{#if user}}
                    <li {{#if activeWebmail}} class="active" {{/if}}>
                        <a href="/webmail/">
                            <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span> Webmail
                            <span class="badge pull-right unseen-counter-{{inboxId}}" {{#if inboxUnseen}}style="display: block;"{{else}}style="display: none;"{{/if}}>{{inboxUnseen}}</span>
                        </a>
                    </li>
                    <li {{#if activeFilters}} class="active" {{/if}}>
                        <a href="/account/filters">
                            <span class="glyphicon glyphicon-filter" aria-hidden="true"></span> Filters
                        </a>
                    </li>
                    <li {{#if activeAutoreply}} class="active" {{/if}}>
                        <a href="/account/autoreply">
                            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> Autoreply
                        </a>
                    </li>
                    <li {{#if activeHelp}} class="active" {{/if}}>
                        <a href="/help">
                            <span class="glyphicon glyphicon glyphicon-question-sign" aria-hidden="true"></span> Help
                        </a>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                          <img src="{{user.gravatar}}" class="profile-image img-circle" width="20" height="20">

                            {{#if user.name}}
                                {{user.name}}
                            {{else}}
                                {{user.username}}
                            {{/if}}

                          <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li {{#if activeHome}} class="active" {{/if}}>
                              <a href="/account/">
                                  <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Account
                              </a>
                          </li>
                          <li {{#if activeSecurity}} class="active" {{/if}}>
                              <a href="/account/security">
                                  <span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Security
                              </a>
                          </li>
                          <li role="separator" class="divider"></li>
                         <li><a href="/account/logout"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out</a></li>
                      </ul>
                    </li>
                {{else}}
                    {{#if allowJoin}}
                        <li {{#if activeCreate}} class="active" {{/if}}>
                            <a href="/account/create">
                                <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Create account
                            </a>
                        </li>
                    {{/if}}
                    <li {{#if activeLogin}} class="active" {{/if}}>
                        <a href="/account/login">
                            <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Log in
                        </a>
                    </li>
                {{/if}}

            </ul>
        </div>

    </div>
</nav>
