<nav class="top-bar" ng-class="isExpanded()" ng-cloak>

  <ul>
    <li class="name"><h1><a href="/">jskom</a></h1></li>
    <li class="toggle-topbar" ng-click="toggleExpanded($event)">
      <i ng-hide="isExpanded()" class="icon-plus jskomRight"></i>
      <i ng-show="isExpanded()" class="icon-minus jskomRight"></i>
    </li>
  </ul>
  
  <section ng-style="{ left: '-' + (menuLevel * 100) + '%' }" ng-click="unexpandTopBar()">
    <ul class="left">
      <li>
        <a class="home" ng-href="/">Home</a>
      </li>
      
      <li class="has-dropdown" ng-class="isMenuOpen('texts')"
          ng-show="connection.isLoggedIn()">
        <a ng-click="openMenu($event, 'texts')">Texts</a>
        
        <ul class="dropdown">
          <li class="title back">
            <h5><a ng-click="closeMenu($event)">Back</a></h5>
            <label>Texts</label>
          </li>
          <li><a href="/texts/new">New text</a></li>
          <li><a href="/texts/go-to">Go to text</a></li>
          <li><a href="/texts/marks">List marked texts</a></li>
        </ul>
      </li>

      <li class="has-dropdown" ng-class="isMenuOpen('conferences')"
          ng-show="connection.isLoggedIn()">
        <a ng-click="openMenu($event, 'conferences')">Conferences</a>
        
        <ul class="dropdown">
          <li class="title back">
            <h5><a ng-click="closeMenu($event)">Back</a></h5>
            <label>Conferences</label>
          </li>
          <li><a href="/conferences/go-to">Go to conference</a></li>
          <li><a href="/conferences/list">List conferences</a></li>
          <li><a href="/conferences/set-unread">Set unread</a></li>
        </ul>
      </li>
      
      <li>
        <a ng-href="/help">Help</a>
      </li>
    </ul>

    <ul class="right">
      <li class="has-dropdown" ng-class="isMenuOpen('sessions')">
        <a ng-click="openMenu($event, 'sessions')">
          <span ng-show="isExpanded()">Sessions</span>
          <span ng-hide="isExpanded()">
            <i class="icon-user"></i>
            <span ng-show="connection.isLoggedIn()">
              {{ connection.session.person|personName }}
            </span>
            <span ng-hide="connection.isLoggedIn()">
              (Not logged in)
            </span>
          </span>
        </a>
        
        <ul class="dropdown">
          <li class="title back">
            <h5><a ng-click="closeMenu($event)">Back</a></h5>
            <label>Sessions</label>
          </li>
          <li ng-show="connection.isLoggedIn()">
            <a ng-click="logout(); unexpandTopBar()">Logout</a>
          </li>
          
          <li class="divider" ng-show="connection.isLoggedIn()"></li>
          
          <li><label>Active sessions</label></li>
          <li ng-repeat="conn in connections">
            <a ng-click="selectConnection(conn); unexpandTopBar()">
              <i class="icon-user" ng-show="conn.id == connection.id"></i>
              <span ng-show="conn.isLoggedIn()">
                {{conn.session.person|personName}}
              </span>
              <span ng-hide="conn.isLoggedIn()">(Not logged in)</span>
            </a>
          </li>
          
          <li class="divider"></li>
          
          <li>
            <a ng-click="newConnection(); unexpandTopBar()">New session...</a>
          </li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
