<div class="" ng-controller="AppRootController as $ctrl">

  <div ng-if="!$ctrl.loginStatus">

    <nav class="navbar navbar-pf-vertical">

      <div class="navbar-header">
        <a ui-sref="landing" class="navbar-brand">
          <img class="navbar-brand-icon" src="~images/thermostat_logo_white_600px.png" height="57" alt="Thermostat"/>
        </a>
        <p hidden class="navbar-text label label-info infotip">{{$ctrl.env}}</p>
      </div>

      <nav class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
          <li class="dropdown">
            <a class="dropdown-toggle nav-item-iconic" id="infoDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span translate-attr="{title: 'navbar.HELP'}" class="fa pficon-help"></span>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="infoDropdown">
              <li><a translate-attr="{href: 'navbar.HELP_URL'}" translate>navbar.HELP</a></li>
              <li><a ui-sref="about" translate>navbar.ABOUT</a></li>
            </ul>
          </li>
        </ul>
      </nav>

    </nav>

    <div class="container-pf-nav-pf-vertical-with-tertiary">
      <div class="pf-framework-content">
        <main ui-view class="main pf-framework-view">
        </main>
      </div>
    </div>

  </div><!--!$ctrl.loginStatus-->

  <div ng-if="$ctrl.loginStatus">
    <div class="layout-pf layout-pf-fixed faux-layout">
      <pf-vertical-navigation
         items="$ctrl.navigationItems"
         show-badges="true"
         pinnable-menus="true"
         update-active-items-on-click="true"
         >
         <div class="navbar-header">
           <a ui-sref="landing" class="navbar-brand">
             <img id="brandLogoImg" class="navbar-brand-icon" src="~images/thermostat_logo_white_600px.png" height="57" alt="Thermostat"/>
           </a>
        <p hidden id="envHeader" class="navbar-text label label-info infotip">{{$ctrl.env}}</p>
         </div>

         <div>
           <ul class="nav navbar-nav navbar-right navbar-iconic">

             <li class="dropdown">
             </li>
             <li class="dropdown">
               <a class="dropdown-toggle nav-item-iconic" id="helpMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                 <span title="Help" class="fa pficon-help"></span>
                 <span class="caret"></span>
               </a>
               <ul class="dropdown-menu" aria-labelledby="helpMenu">
                 <li><a translate-attr="{href: 'navbar.HELP_URL'}" translate>navbar.HELP</a></li>
                 <li><a ui-sref="about" translate>navbar.ABOUT</a></li>
               </ul>
             </li>

             <li ng-if="$ctrl.loginStatus" class="dropdown">
               <a class="dropdown-toggle nav-item-iconic" id="userMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                 <span translate-attr="{title: 'navbar.USERNAME'}" class="fa pficon-user"></span>
                 {{$ctrl.username}}
                 <span class="caret"></span>
               </a>
               <ul class="dropdown-menu" aria-labelledby="userMenu">
                 <li><a ui-sref="user-prefs" translate>navbar.USER_PREFS</a></li>
                 <li><a id="logoutButton" ng-click="$ctrl.logout()" style="cursor: pointer; cursor: hand" translate>navbar.LOGOUT</a></li>
               </ul>
             </li>

           </ul>
         </div>

         </pf-vertical-navigation>
         <div class="container-fluid container-cards-pf container-pf-nav-pf-vertical">
           <div class="pf-framework-content">
             <main ui-view class="main pf-framework-view">
             </main>
           </div>
         </div>
    </div>
  </div><!--$ctrl.loginStatus-->

</div>