<c8y-ui-action-bar-set ng-if="!$parent.child.templateUrl && !hideHeaderActions">
  <li
    class="navbar-form"
    action-bar-position="left"
  >
    <div class="form-group datepicker">
      <input
        class="form-control"
        title="{{ 'Date from' | translate }}"
        placeholder="{{ 'Date from' | translate }}"
        ng-model="ctrl.dateFrom"
        data-cy="eventList--date-from"
        uib-datepicker-popup="{{ datepickerFormat }}"
        datepicker-options="ctrl.datePickerOptionsFrom"
        datepicker-append-to-body="true"
        show-button-bar="false"
        is-open="openFrom"
        ng-click="openFrom=true"
      />
    </div>
    <div class="form-group datepicker">
      <input
        class="form-control"
        title="{{ 'Date to' | translate }}"
        placeholder="{{ 'Date to' | translate }}"
        ng-model="ctrl.dateTo"
        data-cy="eventList--date-to"
        uib-datepicker-popup="{{ datepickerFormat }}"
        datepicker-options="ctrl.datePickerOptionsTo"
        datepicker-append-to-body="true"
        show-button-bar="false"
        is-open="openTo"
        ng-click="openTo=true"
      />
    </div>
  </li>
  <li
    class="navbar-form"
    action-bar-position="left"
  >
    <div class="form-group m-r-md-8">
      <input
        class="form-control"
        title="{{ 'Event type' | translate }}"
        placeholder="{{ 'Event type' | translate }}"
        data-cy="eventList--event-type"
        ng-model="ctrl.eventType"
      />
    </div>

    <button
      class="btn btn-default m-r-md-8"
      title="{{ 'Apply filters' | translate }}"
      type="button"
      data-cy="eventList--apply-filters"
      ng-click="filter(ctrl.dateFrom, ctrl.dateTo, ctrl.eventType)"
    >
      <i c8y-icon="filter"></i>
      {{ 'Apply`filters`' | translate }}
    </button>
    <button
      class="btn btn-default"
      title="{{ 'Clear filters' | translate }}"
      type="button"
      ng-click="clearFilter()"
      ng-if="ctrl.dateFrom || ctrl.dateTo || ctrl.eventType"
    >
      <i c8y-icon="times"></i>
      {{ 'Clear`filters`' | translate }}
    </button>
  </li>
  <c8y-realtime-btn
    class="btn btn-link"
    subscriber-id="ctrl.subscriberId"
  ></c8y-realtime-btn>
  <c8y-refresh-btn></c8y-refresh-btn>
</c8y-ui-action-bar-set>

<c8y-breadcrumbs-set
  ng-if="!$parent.child.templateUrl && !hideHeaderActions && ctrl.showOverviewBreadcrumbs"
>
  <c8y-breadcrumbs-item
    icon="online1"
    label="{{ 'Events' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-overviews"
    label="{{ 'Overviews' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<!-- check if it is inside a widget -->
<div
  class="card-navbar navbar-default"
  ng-if="$parent.child.templateUrl && !hideWidgetActions"
>
  <div class="navbar-nav navbar-right">
    <c8y-realtime-btn subscriber-id="ctrl.subscriberId"></c8y-realtime-btn>
    <button
      class="btn btn-link"
      title="{{ 'Reload' | translate }}"
      type="button"
      data-ng-disabled="!paging.refresh"
      data-ng-click="refresh()"
    >
      <i
        data-ng-class="{'icon-spin': refreshLoading}"
        c8y-icon="refresh"
      ></i>
    </button>
  </div>

  <form class="form-inline">
    <div class="form-group form-group-sm datepicker">
      <input
        class="form-control"
        style="width: 105px"
        placeholder="{{ 'From`date`' | translate }}"
        ng-model="ctrl.dateFrom"
        uib-datepicker-popup
        datepicker-options="ctrl.datePickerOptionsFrom"
        datepicker-append-to-body="true"
        show-button-bar="false"
        is-open="openFrom"
        ng-click="openFrom=true"
      />
    </div>
    <div class="input-group input-group-sm">
      <div class="form-group form-group-sm datepicker">
        <input
          class="form-control"
          style="width: 105px"
          placeholder="{{ 'To`date`' | translate }}"
          ng-model="ctrl.dateTo"
          uib-datepicker-popup
          datepicker-options="ctrl.datePickerOptionsTo"
          datepicker-append-to-body="true"
          show-button-bar="false"
          is-open="openTo"
          ng-click="openTo=true"
        />
      </div>
      <div class="input-group-btn">
        <button
          class="btn btn-default"
          title="{{ 'Filter by date range' | translate }}"
          type="button"
          ng-click="ctrl.filter(ctrl.dateFrom, ctrl.dateTo, ctrl.filters.type)"
        >
          <i c8y-icon="filter"></i>
        </button>
        <button
          class="btn btn-default"
          title="{{ 'Clear date range' | translate }}"
          type="button"
          ng-click="ctrl.clearFilter(ctrl.filters.type)"
          ng-if="ctrl.dateFrom || ctrl.dateTo"
        >
          <i c8y-icon="times"></i>
        </button>
      </div>
    </div>
  </form>
</div>

<!-- empty state -->
<c8y-ui-empty-state
  [icon]="'online1'"
  [title]="'No events to display.' | translate"
  ng-if="events.length == 0"
>
  <span c8y-guide-docs>
    <small translate>
      Find out more in the
      <a
        c8y-guide-href="/docs/device-management-application/monitoring-and-controlling-devices/#to-view-events"
      >
        user documentation
      </a>
      .
    </small>
  </span>
</c8y-ui-empty-state>

<div
  class="page-sticky-header hidden-xs c8y-list__item c8y-list--timeline"
  ng-if="!$parent.child.templateUrl && events.length > 0"
>
  <div class="d-flex">
    <div class="c8y-list--timeline__item__date">
      <p
        class="m-0 text-medium text-truncate"
        title="{{ 'Date' | translate }}"
      >
        {{ 'Date' | translate }}
      </p>
    </div>
    <div class="c8y-list__item__block flex-grow">
      <div class="c8y-list__item__body">
        <div class="content-flex-50">
          <div class="col-8">{{ 'Event' | translate }}</div>
          <div class="col-4">{{ 'Source' | translate }}</div>
        </div>
      </div>
      <div class="c8y-list__item__actions m-l-40"></div>
    </div>
  </div>
</div>

<div ng-class="{ 'card-block': $parent.child.templateUrl }">
  <div class="c8y-list__group c8y-list--timeline">
    <div
      class="c8y-list--timeline__item"
      ng-class="{ expanded: isOpen(evt) }"
      ng-repeat="evt in events | orderBy: ordering track by evt.id"
    >
      <small class="c8y-list--timeline__item__date">
        {{ absolute(evt) }}
      </small>
      <div class="c8y-list__item">
        <div class="c8y-list__item__block">
          <div class="c8y-list__item__icon">
            <c8y-event-binary-icon event="evt"></c8y-event-binary-icon>
          </div>
          <div class="c8y-list__item__body">
            <div class="content-flex-50">
              <div ng-class="{ 'col-8': !hideDevice, 'col-12': hideDevice }">
                <button
                  class="btn-clean c8y-list__item__title"
                  title="{{ evt.text | translate }}"
                  type="button"
                  ng-click="toggle(evt)"
                >
                  {{ evt.text | translate }}
                </button>
              </div>
              <div
                class="col-4"
                ng-if="!hideDevice"
              >
                <a
                  class="text-truncate"
                  title="{{ evt.source.name || evt.source.id }}"
                  ng-href="#/device/{{ evt.source.id }}"
                >
                  <i c8y-icon="exchange m-r-4"></i>
                  <span>{{ evt.source.name || evt.source.id }}</span>
                </a>
              </div>
            </div>
          </div>
          <div
            class="c8y-list__item__actions"
            ng-click="$event.stopPropagation()"
          >
            <button
              class="collapse-btn"
              title="{{ 'Expand' | translate }}"
              type="button"
              data-cy="eventList--expand-details-btn"
              ng-click="toggle(evt)"
            >
              <i c8y-icon="chevron-down"></i>
            </button>
          </div>
        </div>
        <div
          class="collapse"
          uib-collapse="!isOpen(evt)"
          ng-click="$event.stopPropagation()"
        >
          <div
            class="c8y-list__item__collapse--container"
            ng-if="isOpen(evt)"
          >
            <div class="row">
              <div
                class="col-xs-12"
                ng-class="{ 'col-md-6': displayEventsBinary(evt) }"
              >
                <div
                  class="legend form-block"
                  translate
                >
                  Details
                </div>
                <ul class="list-unstyled small">
                  <li class="p-t-4 p-b-4 d-flex separator-bottom">
                    <label class="small m-b-0 m-r-8 a-s-start">
                      {{ 'Time' | translate }}
                    </label>
                    <span
                      class="m-l-auto"
                      data-cy="eventList--details-time"
                    >
                      {{ evt.time | date : 'medium' }}
                    </span>
                  </li>
                  <li class="p-t-4 p-b-4 d-flex separator-bottom">
                    <label class="small m-b-0 m-r-8 a-s-start">
                      {{ 'Server creation time' | translate }}
                    </label>
                    <span
                      class="m-l-auto"
                      data-cy="eventList--details-server-creation-time"
                    >
                      {{ evt.creationTime | date : 'medium' }}
                    </span>
                  </li>
                  <li
                    class="p-t-4 p-b-4 d-flex separator-bottom"
                    data-ng-repeat="(key, label) in getStandardKeys(evt, ['text'])"
                  >
                    <label class="small m-b-0 m-r-8 a-s-start">
                      {{ label | translate }}
                    </label>
                    <span
                      class="m-l-auto"
                      data-cy="eventList--details-type"
                    >
                      {{ evt[key] }}
                    </span>
                  </li>

                  <li
                    class="p-t-4 p-b-4 d-flex separator-bottom"
                    data-ng-repeat="key in getNonStandardKeys(evt)"
                  >
                    <label class="small m-b-0 m-r-8 a-s-start">
                      {{ key | humanize2 }}
                    </label>
                    <span
                      class="m-l-auto"
                      data-cy="eventList--details-get-non-standard-keys"
                    >
                      {{ evt[key] | checkForDate : true : 'medium' }}
                    </span>
                  </li>
                </ul>
              </div>
              <div
                class="col-md-6"
                ng-show="displayEventsBinary(evt)"
              >
                <div
                  class="legend form-block"
                  translate
                >
                  Attachment
                </div>
                <c8y-event-binary-preview
                  class="m-b-16 d-block"
                  event="evt"
                ></c8y-event-binary-preview>
                <c8y-event-binary-actions
                  event="evt"
                  enable-download="true"
                ></c8y-event-binary-actions>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <c8y-load-more change-page-size></c8y-load-more>
</div>
