
<br/>

<div class="row">
  <div class="col-md-10 col-md-offset-1">
      <h1>Activity Log</h1>
  </div>
</div>

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="filter">
      <input type="text" class="form-control" ng-model="search" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="Search"/>
      <select class="form-control" ng-model="action" ng-options="a.name for a in actions" ng-change="updateFilter()">
        <option value="">-- all actions --</option>
      </select>
      <select class="form-control" ng-model="pageItems" ng-options="a.name for a in pageItemCount" ng-change="updateFilter(true)">
      </select>
    </div>
    <div class="pagination pull-right">
      <button class="btn btn-default btn-outline" ng-click="showPrevPage()" ng-disabled="busy || currentPage <= 1"><i class="fa fa-angle-double-left"></i> prev</button>
      <button class="btn btn-default btn-outline" ng-click="showNextPage()" ng-disabled="busy || pageItems > eventLogs.length">next <i class="fa fa-angle-double-right"></i></button>
    </div>
  </div>
</div>

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="card card-block" style="max-width: 100%">
            <center ng-show="busy"><h2><i class="fa fa-circle-o-notch fa-spin"></i></h2></center>
            <table ng-hide="busy" class="table table-striped table-condensed table-hover">
              <thead>
                <tr>
                  <th class="col-md-2">Time</th>
                  <th class="col-md-3">Source</th>
                  <th class="col-md-7">Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="eventLog in eventLogs">
                  <td><span uib-tooltip="{{eventLog.creationTime}}" class="arrow">{{ eventLog.creationTime | prettyDate }}</span></td>
                  <td>{{ eventLog.source.username || eventLog.source.userId || eventLog.source.authType }} <span ng-show="eventLog.source.ip || eventLog.source.appId"> ({{ eventLog.source.ip || eventLog.source.appId }}) </span> </td>
                  <td>{{ eventLog | eventLogDetails }}</td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Offset the footer -->
<br/><br/>
