<div class="modal-header">
    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title"><i class="fa fa-file-text-o"></i> Event Logs <small>{{cipher.name}}</small></h4>
</div>
<div class="modal-body">
    <div class="hidden-xs">
        <input type="datetime-local" ng-model="filterStart" required
               class="form-control input-sm" style="width:initial; display: inline;" />
        -
        <input type="datetime-local" ng-model="filterEnd" required
               class="form-control input-sm" style="width:initial; display: inline;" />
        <button type="button" class="btn btn-primary btn-sm btn-flat" ng-click="refresh()">
            <i class="fa fa-fw fa-refresh" ng-class="{'fa-spin': loading}"></i> Refresh
        </button>
        <hr />
    </div>
    <div ng-show="loading && !events.length">
        Loading...
    </div>
    <div ng-show="!loading && !events.length">
        <p>There are no events to list.</p>
    </div>
    <div class="table-responsive" ng-show="events.length" style="margin: 0;">
        <table class="table table-striped table-hover" style="{{ !continuationToken ? 'margin: 0;' : '' }}">
            <thead>
                <tr>
                    <th>Timestamp</th>
                    <th><span class="sr-only">App</span></th>
                    <th>User</th>
                    <th>Event</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="event in filteredEvents = (events)">
                    <td style="width: 210px; min-width: 100px;">
                        {{event.date | date:'medium'}}
                    </td>
                    <td style="width: 20px;" class="text-center">
                        <i class="text-muted fa fa-lg {{event.appIcon}}" title="{{event.appName}}, {{event.ip}}"></i>
                    </td>
                    <td style="width: 150px; min-width: 100px;">
                        {{event.userName}}
                    </td>
                    <td>
                        {{event.message}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center" ng-show="continuationToken">
        <button class="btn btn-link btn-block" ng-click="next()" ng-if="!loading">
            Load more...
        </button>
        <i class="fa fa-fw fa-refresh fa-spin text-muted" ng-if="loading"></i>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
</div>