<template name="navbar">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <a class="navbar-brand" href="/">TextCircle</a><!-- nav title -->
      <ul class="nav navbar-nav">
        <li>
          <a href="#" class="js-add-doc">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            New document
          </a>
        </li>
        <!-- drop down list -->
        <li role="presentation" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            Documents <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            {{#each documents }}
              <li><a href="/documents/{{ _id }}">{{ title }}</a></li>
            {{/each}}
          </ul>
        </li>
        <!-- end drop down list -->
      </ul>

      <p class="navbar-text navbar-right">
        {{> loginButtons align="right" }}
      </p>
    </div><!-- /nav container -->
  </nav><!-- /nav -->
</template>