<!-- Navigation -->
<aside class="navigation">
  <!-- Navigation-->
  <nav>
    <ul class="nav luna-nav">
      <!--<li class="nav-category">-->
        <!--Main-->
      <!--</li>-->
      <li
          ng-repeat="route in vm.routes track by $index"
          ui-sref-active="active"
          ng-class="{'nav-container': route.children.length > 0}">
        <a ng-if="route.state && !route.children" ui-sref="{{route.state}}({{route.params}})" ng-click="vm.activateRoute(route)">
          {{route.label}}
        </a>
        <a ng-if="route.state && route.children" ng-click="vm.activateRoute(route)">
          {{route.label}}<span class="sub-nav-icon"> <i class="stroke-arrow"></i> </span>
        </a>
        <ul class="nav nav-second" uib-collapse="vm.isSelected(route.state, vm.navSelected)">
          <li ng-repeat="childRoute in route.children | orderBy:'label'" ui-sref-active="active">
            <a ui-sref="{{childRoute.state}}({{childRoute.params}})"> {{childRoute.label}}</a>
          </li>
        </ul>
      </li>
      <li class="nav-info">
        <div class="row">
          <div class="col-sm-4">
            <i class="pe pe-7s-shield text-accent"></i>
          </div>
          <div class="col-sm-8">
            <h4 class="c-white">{{vm.appName}}</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <span class="c-white">{{vm.payoff}}</span>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <i class="pe pe-7s-lock text-accent"></i>
          </div>
          <div class="col-sm-8">
            <a ng-click="vm.logout()" class="btn btn-accent btn-block btn-logout">Logout</a>
          </div>
        </div>
        <!--<a ng-click="vm.togglePanel()" class="btn btn-success">Open XSP</a>-->
        <!--<a ng-click="vm.addToDashboard()" class="btn btn-success">Add to home</a>-->
      </li>
    </ul>
  </nav>
  <!-- End navigation-->
</aside>