<div class="container-fluid">
  <div class="row">

    <div class="col-sm-8 col-md-9">

      <div class="page-header page-header-bleed-right">
        <div class="actions pull-right">
          <a ng-link="welcome" class="btn btn-primary ups-create-app-btn"><span class="pficon pficon-add"></span> Create Application</a>
        </div>
        <h1>Applications</h1>
      </div>

      <div class="ups-sub-header">

        <!--<form role="form" class="search-pf has-button">-->
          <!--<div class="form-group has-clear">-->
            <!--<div class="search-pf-input-group">-->
              <!--<label for="search1" class="sr-only">Search</label>-->
              <!--<input id="search1" type="search" class="form-control" placeholder="Search">-->
              <!--<button type="button" class="clear" aria-hidden="true"><span class="pficon pficon-close"></span></button>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="form-group">-->
            <!--<button class="btn btn-default" type="button"><span class="fa fa-search"></span></button>-->
          <!--</div>-->
        <!--</form>-->
      </div><!-- subheader -->


      <ul class="media-list ups-app-stream">

        <li class="media" ng-repeat="app in home.apps">
          <div class="actions">
            <ul class="list-inline">
              <li><a href ng-click="home.changeName(app)"><span class="pficon pficon-edit"></span> Edit name</a></li>
              <li class="danger"><a href="#" ng-click="home.deleteApp( app )"><span class="pficon pficon-delete"></span> Delete</a></li>
            </ul>
          </div>

          <a ng-link="appDetail({app: app.pushApplicationID, tab: 'variants'})">
            <div class="media-left">
              <div class="app-icon">{{ app.name | limitTo: 1 }}</div>
            </div>

            <div class="media-body">

              <h2 class="media-heading">{{ app.name }} <small></small></h2>
              <ul class="list-inline">
                <li><span class="pficon pficon-user"></span> created by  <strong>{{ app.developer }}</strong></li>
                <li><i class="fa fa-code-fork"></i> <ups-pluralize noun="variant" count="app.variants.length"></ups-pluralize></li>
                <li><span class="pficon pficon-messages"></span> <ups-pluralize noun="message" count="app.$messageCount"></ups-pluralize> sent</li>
                <li><i class="fa fa-mobile"></i> <ups-pluralize noun="device" count="app.$deviceCount"></ups-pluralize> registered</li>
              </ul>

            </div>
          </a>

        </li>

      </ul>

      <pagination items-per-page="8" max-size="5" total-items="home.totalItems"
                  ng-model="home.currentPage"
                  ng-change="home.pageChanged(home.currentPage)"
                  ng-show="home.totalItems / 8 > 1"
                  direction-links="true" boundary-links="false" rotate="false"
                  previous-text="&lsaquo;" next-text="&rsaquo;" class="ups-pagination">
      </pagination>

      <pagination direction-links="true" boundary-links="false" total-items="100" ng-model="metrics.currentPage" previous-text="&lsaquo;" next-text="&rsaquo;" class="pull-right ups-pagination" ng-show="activityCtrl.pushMetrics.length" ng-change="activityCtrl.pageChanged()" max-size="5" rotate="false"></pagination>

    </div><!-- /col -->


    <div class="col-sm-4 col-md-3 sidebar-pf sidebar-pf-right">

      <div class="sidebar-header sidebar-header-bleed-left sidebar-header-bleed-right">
        <h2 class="h5">General Statistics</h2>
      </div>
      <ul class="list-unstyled ups-statistics">
        <li><ups-pluralize noun="App" count="app.stats.applications"></ups-pluralize></li>
        <li><span class="count">{{ app.stats.messages }}</span>Messages</li>
        <li><ups-pluralize noun="Device" count="app.stats.devices"></ups-pluralize></li>
      </ul>

      <div class="sidebar-header sidebar-header-bleed-left sidebar-header-bleed-right"
           ng-if="app.stats.messages">
        <h2 class="h5">Latest Notifications</h2>
      </div>
      <div class="list-group" ng-if="app.stats.messages">
        <a ng-link="appDetail({app: notification.id, tab: 'variants'})" class="list-group-item" ng-repeat="notification in home.topNotifications | limitTo:4">
          <h3 class="list-group-item-heading">{{ notification.name }}</h3>
          <p class="list-group-item-text">{{ notification.submittedDate | date:'d MMM, H:mm:ss, yyyy' }}</p>
        </a>
      </div>
      <!--           <p><a href="#"><span class="pficon pficon-history"></span> See all notifications</a></p> -->
    </div><!-- /col -->

  </div><!-- /row -->
</div><!-- /container -->
