<div class="col-md-10 lo-main-pane">
  <div class="lo-content-area col-md-12">


    <div class="dash col-md-12">

    <h2>Welcome!</h2>
      <div class="panel ups-panel pull-left ups-padding-box expand">
        <div class="pull-left ups-padding-box">
          <div class="pull-left dashboard active-apps">
            <i class="fa fa-list-alt"></i>&nbsp; {{ dashboardData.applications }}&nbsp;
          </div>
          <div class="pull-left">applications
            <br>active
          </div>
        </div>
        <div class="pull-left ups-padding-box">
          <div class="pull-left dashboard notifications">
            <i class="fa fa-send"></i>&nbsp; {{ dashboardData.messages }}&nbsp;
          </div>
          <div class="pull-left">
            notifications
            <br>delivered
          </div>
        </div>
        <div class="pull-left ups-padding-box">
          <div class="pull-left dashboard installations">
            <i class="fa fa-tablet"></i>&nbsp; {{ dashboardData.devices }}&nbsp;
          </div>
          <div class="pull-left">installations
            <br>registered
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

    <div class="row">
      <div class="dash col-md-6">
        <div class="panel lo-panel ups-panel-variants">
          <div class="panel-heading">
            <div class="pull-left">
              <h2>Warnings</h2>
            </div>
            <div class="pull-right">
              <span></span>
            </div>
            <div class="clearfix"></div>
          </div>
          <ul class="list-group ">
            <li class="list-group-item" ng-repeat="warning in warnings">
              <i class="fa fa-warning"></i> {{ warning.applicationName }} &raquo; {{ warning.variant.name }}
              <a class="pull-right" href="#/activity/{{warning.applicationID}}/{{warning.variant.variantID}}">
                Activity &raquo;
              </a>
            </li>
            <li class="list-group-item" ng-hide="warnings.length">
              <i class="fa fa-check-circle"></i>&nbsp; No problems detected currently.
            </li>
          </ul>
        </div>

      </div>
      <div class="dash col-md-6">

        <div class="panel lo-panel ups-panel-variants">
          <div class="panel-heading">
            <div class="pull-left">
              <h2>Recent Activity</h2>
            </div>
            <div class="pull-right">
              <span ng-show="topThree.length">Number of receivers</span>
            </div>
            <div class="clearfix"></div>
          </div>
          <ul class="list-group " id="recent-activity">
            <li class="list-group-item" ng-repeat="top in topThree">
              <a href="#/activity/{{top.id}}">
                {{ top.name }} &nbsp; ({{ top.submittedDate | date : 'd MMM, HH:mm:ss, yyyy' }})
              </a>
              <div class="pull-right">{{ top.totalReceivers}}</div>
            </li>
            <li class="list-group-item" ng-hide="topThree.length">
              No notifications have yet been sent.
            </li>
          </ul>
        </div>

      </div>

    </div>

  </div>
</div>
