<c8y-action-bar-item
  [placement]="'right'"
  [priority]="100"
>
  <c8y-realtime-btn
    [service]="realtime"
    [disabled]="realtimeDisabled"
    (onToggle)="togglePositionRealtime($event)"
  ></c8y-realtime-btn>
</c8y-action-bar-item>
<c8y-action-bar-item
  [placement]="'right'"
  [priority]="60"
>
  <c8y-time-interval
    [maxCustomDate]="maxDate"
    [dateRangePickerConfig]="dateRangePickerConfig"
    (interval)="service.setInterval($event); toggleRealtime($event)"
  ></c8y-time-interval>
</c8y-action-bar-item>

<div class="card card--grid content-fullpage d-grid grid__col--8-4--md">
  <div
    class="bg-white p-relative"
    style="min-height: 30vh"
  >
    <c8y-map
      [config]="config"
      [assets]="device"
      [polyline$]="service.polyline$"
      [polylineOptions]="{ color: 'darkblue' }"
    >
      <div *c8yMapPopup="let context">
        <c8y-tracking-marker-popup [context]="context"></c8y-tracking-marker-popup>
      </div>
    </c8y-map>
  </div>

  <div class="d-flex d-col bg-inherit content-fullpage bg-gray-white">
    <div class="card-header large-padding separator sticky-top">
      <span
        class="card-title"
        translate
      >
        Tracking events
      </span>
    </div>
    <div class="inner-scroll">
      <c8y-list-group class="c8y-list__group--strip">
        <ng-template
          c8yFor
          let-event
          [c8yForOf]="service.events$"
          [c8yForPipe]="service.pipe"
          [c8yForRealtime]="realtime"
          [c8yForRealtimeOptions]="{ entityOrId: device }"
          [c8yForLoadMore]="'hidden'"
          [c8yForNotFound]="empty"
          (c8yForLoadMoreComponent)="
            loadMoreComponent = $event; loadMoreComponent.useIntersection = false
          "
        >
          <c8y-li
            class="pointer"
            [ngClass]="{ 'text-primary text-bold': activeMarkers['p' + event?.id] }"
            (click)="toggleMarker(event)"
            [attr.data-cy]="'c8y-tracking--tracking-event-item-' + event?.id"
          >
            <c8y-li-icon [ngClass]="{ 'text-primary': activeMarkers['p' + event?.id] }">
              <i c8yIcon="c8y-location"></i>
            </c8y-li-icon>
            <c8y-li-body>
              <div class="d-flex">
                <span>
                  {{ event.time | date: 'mediumDate' }}
                </span>
                <span class="m-l-auto">
                  {{ event.time | date: 'mediumTime' }}
                </span>
              </div>
            </c8y-li-body>
          </c8y-li>
        </ng-template>
      </c8y-list-group>
    </div>

    <!-- empty state -->
    <ng-template #empty>
      @if (!service.hasEvents) {
        <c8y-ui-empty-state
          icon="c8y-location"
          [title]="'No tracking events found.' | translate"
          [subtitle]="'Select another time range.' | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      }
    </ng-template>

    @if (loadMoreComponent?.hasMore) {
      <div>
        <button
          class="btn btn-link fit-w sticky-bottom separator-top"
          [title]="'Load more' | translate"
          type="button"
          [disabled]="loadMoreComponent?.isLoading"
          (click)="loadMoreComponent.loadMore()"
          data-cy="c8y-tracking--load-more"
        >
          {{ 'Load more' | translate }}
        </button>
      </div>
    }

    <div class="card-footer separator">
      <button
        class="btn btn-default"
        [title]="'Deselect all markers' | translate"
        type="button"
        [disabled]="(activeMarkers | json) === '{}'"
        (click)="map.clearMarkers('event'); activeMarkers = {}"
      >
        {{ 'Deselect all markers' | translate }}
      </button>
    </div>
  </div>
</div>