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

      <div ups-breadcrumb/>

      <div class="panel lo-panel ups-panel" style="margin-top: 20px">
        <div class="ups-padding-box">
          <table class="expand">
            <th>
              <tr>
                <td style="padding: 6px 0;"><strong>Notification</strong>
                </td>
                <td><strong>Receivers</strong>
                </td>
                <td><strong>Status</strong>
                </td>
                <td><strong>Timestamp</strong>
                </td>
              </tr>
            </th>
            <tr style="border-top: 1px #eee solid" ng-repeat-start="metric in pushMetrics">
              <td style="padding: 8px 0;">
                <a href ng-click="expand(metric)">
                  <i class="fa"
                     ng-class="{'fa-plus-square-o': isCollapsed(metric), 'fa-minus-square-o': !isCollapsed(metric)}"></i>
                  {{ metric.rawJsonMessage | limitTo : 50 }}...
                </a>
              </td>
              <td>
                <strong>{{ metric.totalReceivers ? metric.totalReceivers : 'All'  }}</strong> installations
              </td>
              <td>
                <strong>
                  {{metric.deliveryStatus}}
                  <i class="fa fa-warning" ng-show="metric.deliveryFailed == true"></i>
                  {{ metric.deliveryFailed == true ? 'Failed' : 'Succeeded' }}
                </strong>
              </td>
              <td>
                {{ metric.submitDate | date : 'd MMM, HH:mm:ss, yyyy' }}
              </td>
            </tr>
            <tr collapse="isCollapsed(metric)" ng-repeat-end>
              <td colspan="4" style="padding: 8px;">
                <div class="ups-toggle-box ups-panel-details">
                  <table>
                    <tr>
                      <td>Request IP:</td>
                      <td><strong>{{ metric.ipAddress }}</strong>
                      </td>
                      <td><a href ng-click="showFullRequest(metric.rawJsonMessage)">Full Request</a>
                      </td>
                    </tr>
                    <tr>
                      <td>Message:</td>
                      <td colspan="2"><strong>{ "message" : "{{ parse(metric).alert }}" }</strong></td>
                    </tr>
                  </table>
                  <hr ng-show="metric.deliveryFailed">
                  <table ng-show="metric.deliveryFailed">
                    <tr>
                      <td>Error:</td>
                      <td><strong>Problem occurred during sending push notification(s)</strong></td>
                      <td><a href="#/detail/{{applicationId}}">Edit Push Network...</a></td>
                    </tr>
                    <tr ng-if="detailsPage()">
                      <td>Reason:</td>
                      <td colspan="2">{{ metric.variantInformations[0].reason }}</td>
                    </tr>
                  </table>
                  <hr ng-show="!detailsPage() && metric.variantInformations.length">
                  <table ng-if="!detailsPage() && metric.variantInformations.length">
                    <tr>
                      <td>Variants:</td>
                      <td>
                        <table class="expand">
                          <tr ng-repeat="variant in variantMetricInformation(metric.variantInformations)">
                            <td>
                              <a href="#/detail/{{applicationId}}">{{ variant.name ? variant.name : variant.variantID }}</a>
                            </td>
                            <td>{{ variant.deliveryStatus == false ? 'Failed' : 'Succeeded' }}</td>
                            <td>
                              <strong>{{ variant.receivers }}</strong> installations
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <pagination direction-links="true" boundary-links="false" total-items="totalItems" ng-model="currentPage" previous-text="&lsaquo;" next-text="&rsaquo;" class="pull-right ups-pagination"  ng-change="pageChanged()" max-size="5" rotate="false"></pagination>
      </div>
    </div>
  </div>
</div>