@if (displayMode() === GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
  <c8y-global-context-connector
    [controls]="widgetControls()"
    [config]="contextConfig()"
    [isLoading]="isLoading()"
    [dashboardChild]="dashboardChild"
    [linked]="isLinkedToGlobal()"
    (configChange)="onContextChange($event)"
    (refresh)="onRefresh()"
  ></c8y-global-context-connector>
} @else {
  <c8y-local-controls
    [controls]="widgetControls()"
    [displayMode]="displayMode()"
    [config]="contextConfig()"
    [isLoading]="isLoading()"
    (configChange)="onContextChange($event)"
    (refresh)="onRefresh()"
  ></c8y-local-controls>
}

<c8y-event-image-view
  #imageView
  [events]="events()"
  [isLoading]="isLoading()"
  [historyMode]="isHistoryMode()"
  [slideshowLoop]="config()?.slideshowLoop ?? true"
></c8y-event-image-view>

@if (isHistoryMode() && imageView.totalEvents() > 1) {
  <c8y-widget-action>
    @if (imageView.isDownloading()) {
      <button
        class="btn btn-icon"
        [attr.aria-label]="'Cancel download' | translate"
        [tooltip]="'Cancel download' | translate"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        (click)="imageView.cancelExport()"
      >
        <c8y-export-progress
          [progress]="imageView.exportProgress()"
          [cancellable]="true"
        />
      </button>
    } @else {
      <button
        class="btn btn-icon"
        [attr.aria-label]="'Download loaded images' | translate"
        [tooltip]="'Download loaded images' | translate"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        [disabled]="imageView.isExporting() || isLoading()"
        (click)="imageView.downloadAll()"
      >
        <i
          c8yIcon="download"
          aria-hidden="true"
        ></i>
      </button>
    }
  </c8y-widget-action>

  <c8y-widget-action>
    @if (imageView.isExporting()) {
      <button
        class="btn btn-icon"
        [attr.aria-label]="'Cancel export' | translate"
        [tooltip]="'Cancel export' | translate"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        (click)="imageView.cancelExport()"
      >
        <c8y-export-progress
          [progress]="imageView.exportProgress()"
          [cancellable]="true"
        />
      </button>
    } @else {
      <button
        class="btn btn-icon"
        [attr.aria-label]="'Export loaded images to GIF' | translate"
        [tooltip]="'Export loaded images to GIF' | translate"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        [disabled]="imageView.isDownloading() || isLoading()"
        (click)="imageView.exportToGif()"
      >
        <i
          c8yIcon="export"
          aria-hidden="true"
        ></i>
      </button>
    }
  </c8y-widget-action>
} @else {
  <c8y-widget-action>
    <button
      class="btn btn-icon"
      [attr.aria-label]="'Download' | translate"
      [tooltip]="'Download' | translate"
      placement="top"
      container="body"
      type="button"
      [delay]="500"
      [disabled]="!imageView.imageUrl() || isLoading()"
      (click)="imageView.downloadCurrent()"
    >
      <i
        c8yIcon="download"
        aria-hidden="true"
      ></i>
    </button>
  </c8y-widget-action>
}