<section class="content-header">
    <h1>
        Events
        <small>audit your organization</small>
    </h1>
</section>
<section class="content">
    <div class="box">
        <div class="box-header with-border">
            &nbsp;
            <div class="box-filters hidden-xs hidden-sm">
                <input type="datetime-local" ng-model="filterStart" required
                       class="form-control input-sm" style="width:initial;" />
                -
                <input type="datetime-local" ng-model="filterEnd" required
                       class="form-control input-sm" style="width:initial;" />
            </div>
            <div class="box-tools">
                <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>
            </div>
        </div>
        <div class="box-body" ng-class="{'no-padding': filteredEvents.length}">
            <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">
                <table class="table table-striped table-hover">
                    <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>
                                <div ng-bind-html="event.message"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-footer 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>
</section>
