<div class="card" style="min-height:100px;">
    <div class="pull-left" ng-show="meta" style="padding:10px;">
        <span ng-show="!events.length && meta.es_total_count > 0">
            <i class="fa fa-circle-o-notch fa-spin"></i> Searching..
        </span>
        <span ng-show="events.length || meta.es_total_count == 0">
            {{ meta.es_total_count }} events <span ng-show="meta.numHiddenEvents > 0 && !meta.showHiddenEvents" style="color:red;">({{ meta.numHiddenEvents }} hidden)</span> ({{ meta.es_time/1000 }}s)
            <span ng-show="meta.noisy" style="margin-left:10px;color:red;font-weight:bold;">
                <i class="fa fa-warning"></i> Wow, that is a lot of events! I will only show you 500 of them.
            </span>
        </span>
    </div>
    <div class="pull-right">

        <button style="min-width:200px;" class="btn btn-danger" ng-show="meta.numHiddenEvents > 0" ng-click="meta.showHiddenEvents = !meta.showHiddenEvents">
            <span ng-show="!meta.showHiddenEvents"><i class="fa fa-eye"></i> Show </span>
            <span ng-show="meta.showHiddenEvents"><i class="fa fa-eye-slash"></i> Hide </span>
            {{ meta.numHiddenEvents }} hidden events
        </button>

        <div class="btn-group" style="margin-left:10px;">
            <button class="btn btn-default" ng-click="filter.order = { 'asc': 'desc', 'desc': 'asc'}[filter.order];applyOrder()"><i ng-class="{'asc': 'fa fa-sort-asc', 'desc': 'fa fa-sort-desc'}[filter.order]"></i> Sort</button>
            <a class="btn btn-default" href="/sketch/{{ sketchId }}/explore/export/" download="export.csv"><i class="fa fa-cloud-download"></i> Export</a>
            <button class="btn btn-default" ng-click="toggleAll()"><i class="fa fa-check"></i> Toggle all</button>
            <button class="btn btn-default" ng-click="addStar()" ng-disabled="!anySelected"><i class="fa fa-star icon-yellow"></i> Add star</button>
            <button class="btn btn-default" ng-click="removeStar()" ng-disabled="!anySelected"><i class="fa fa-star icon-grey"></i> Remove star</button>
        </div>
    </div>
    <br><br><br>

    <div ng-repeat="event in events">
        <ts-event ng-hide="event.hidden && !meta.showHiddenEvents" event="::event" meta="::meta" sketch-id="::sketchId" prev-timestamp="::events[$index-1]['_source'].timestamp" next-timestamp="::events[$index+1]['_source'].timestamp" index="::$index" order="::filter.order"></ts-event>
    </div>
</div>