<div ng-if="activity.totalCount > 0 || activity.isSearchActive()">
  <h3>Notification activity</h3>

  <p>Explore push messages that you have sent to the registered devices.</p>

  <div class="dataTables_wrapper no-footer">
    <div class="dataTables_header">
      <div class="dataTables_filter">
        <label><input type="search" class="" aria-controls="DataTables_Table_0" ng-model="activity.searchString" ng-model-options="{debounce: 300}"></label>
      </div>
      <div class="dataTables_info" role="status" aria-live="polite">
        Showing <b>{{ activity.currentStart }}</b> to <b>{{ activity.currentEnd }}</b> of <b>{{ activity.totalCount }}</b> Messages
      </div>
    </div>

    <div class="table-responsive">

  <table id="activity-table" class="datatable table table-striped table-bordered" pf-datatable>
    <thead>
    <tr>
      <th></th>
      <th>Message</th>
      <th>IP Address</th>
      <th>Installations</th>
      <th>Status</th>
      <th>Sent</th>
      <th>First time opened</th>
      <th>Last time opened</th>
    </tr>
    </thead>
    <tbody>
    <tr class="odd" ng-if="activity.totalCount === 0">
      <td valign="top" align="center" colspan="8" class="dataTables_empty">
        <p>No message matches the given search criteria.</p>
      </td>
    </tr>
    <tr ng-repeat-start="metric in activity.metrics">
      <td>
        <a href ng-click="metric.$toggled = !metric.$toggled">
          <i class="fa" ng-class="{ 'fa-plus-square-o icon-plus-sign-alt': !metric.$toggled, 'fa-minus-square-o icon-minus-sign-alt': metric.$toggled }"></i>
        </a>
      </td>
      <td>{{ metric.$message.alert | limitTo : 15 }}{{ metric.$message.alert.length > 15 ? '&hellip;' : '' }}</td>
      <td>{{ metric.ipAddress }}</td>
      <td>{{ metric.totalReceivers }} receivers / {{ metric.appOpenCounter }} opened</td>
      <td ng-if="!metric.$deliveryStatus">
        <span class="pficon spinner spinner-sm spinner-inline"></span>
        Pending...</td>
      <td ng-if="metric.$deliveryStatus && !metric.$deliveryFailed" class="success"><i class="fa fa-check"></i> Succeeded</td>
      <td ng-if="metric.$deliveryStatus && metric.$deliveryFailed" class="danger">
          <span class="pficon-layered">
            <span class="pficon pficon-error-octagon"></span>
            <span class="pficon pficon-error-exclamation"></span>
          </span>
        Failed
      </td>
      <td>{{ metric.submitDate | date : 'd MMM, HH:mm:ss, yyyy' }}</td>
      <td>
        {{ metric.firstOpenDate | date : 'd MMM, HH:mm:ss, yyyy'}}
      </td>
      <td>
        {{ metric.lastOpenDate | date : 'd MMM, HH:mm:ss, yyyy'}}
      </td>
    </tr>
    <tr ng-repeat-end ng-if="metric.$toggled">
      <td colspan="8" class="ups-pushmessage-detail">
        <div class="alert alert-warning" ng-repeat="variantInformation in metric.variantInformations | filter: { deliveryStatus: false} ">
          <span class="pficon-layered">
            <span class="pficon pficon-warning-triangle"></span>
            <span class="pficon pficon-warning-exclamation"></span>
          </span>


          <strong>Variant <a href ng-link="appDetail({app: activity.app.pushApplicationID, tab: 'variants'})">{{ variantInformation.$variant.name }}</a> has failed:</strong> {{ variantInformation.reason }}
        </div>
        <pre>{{ metric.$message | json  }}</pre>
      </td>
    </tr>
    </tbody>
  </table>

    </div>

    <div class="dataTables_footer" ng-if="activity.totalCount / activity.perPage > 1">
      <div class="dataTables_paginate paging_bootstrap_input">
        <pagination direction-links="true" boundary-links="false"
                    total-items="activity.totalCount"
                    ng-model="activity.currentPage"
                    previous-text="&lsaquo;" next-text="&rsaquo;"
                    class="pull-right ups-pagination"
                    max-size="10"
                    ng-change="activity.onPageChange( activity.currentPage )"
                    rotate="false">
        </pagination>
      </div>
    </div>
  </div>
</div><!-- ng-if -->

<div class="blank-slate-pf" ng-if="activity.totalCount == 0 && !activity.isSearchActive()">
  <div class="blank-slate-pf-icon">
    <i class="fa fa-table"></i>
  </div>

  <h1 ng-if="appDetail.app.$deviceCount == 0">You have no devices registered</h1>
  <h1 ng-if="appDetail.app.$deviceCount != 0">You haven't send push notifications yet</h1>

  <div ng-if="appDetail.app.$deviceCount == 0">
    <p>There are no registered device for this application.</p>
    <p>Check out the documentation on how to get started to <a ups-doc="docs-push-getting-started">register a device</a>.</p>
  </div>

  <div ng-if="appDetail.app.$deviceCount != 0">
    <p>You haven't send push notifications to the device yet.</p>
    <div class="blank-slate-pf-main-action">
      <button class="btn btn-primary btn-lg" ng-click="appDetail.sendNotification()" ng-disabled="!appDetail.app.variants.length">
        <i class="fa fa-paper-plane"></i>
        Send Notification to this app
      </button>
    </div>
  </div>
</div>
