<div
  class="d-grid grid__row--1 fit-h"
  [ngClass]="{
    'grid__col--3-6-3--md': allowChangingContext,
    'grid__col--8-4--md': !allowChangingContext
  }"
>
  <div
    class="d-flex d-col p-relative bg-level-1"
    *ngIf="allowChangingContext"
  >
    <c8y-asset-selector-miller
      class="d-contents"
      [(ngModel)]="contextAsset"
      [asset]="contextAsset"
      (onSelected)="assetSelectionChanged($event)"
      [container]="''"
      [config]="{
        view: 'miller',
        groupsSelectable: groupsSelectable,
        columnHeaders: true,
        showChildDevices: true,
        showUnassignedDevices: true,
        singleColumn: true,
        search: allowSearch,
        showFilter: true
      }"
    ></c8y-asset-selector-miller>
  </div>
  <!-- center column -->
  <div class="inner-scroll bg-component" data-cy="c8y-alarm-event-selector--inner-column">
    <ng-template #noDeviceEmptyState>
      <div class="p-16">
        <c8y-ui-empty-state
          [icon]="timelineTypeTexts.emptyStateIcon"
          [title]="timelineTypeTexts.emptyStateTitle | translate"
          [subtitle]="timelineTypeTexts.assetWithNoItemsEmptyStateSubtitle | translate"
          [horizontal]="true"
        ></c8y-ui-empty-state>
      </div>
    </ng-template>

    <ng-template #loadingData>
      <div class="p-16 text-center">
        <c8y-loading></c8y-loading>
      </div>
    </ng-template>

    <div
      class="bg-inherit"
      *ngIf="assetSelection | async as asset; else noDeviceEmptyState"
    >
      <div class="p-l-16 p-r-16 p-t-8 p-b-8 sticky-top bg-inherit separator-bottom">
        <p
          class="text-medium text-truncate"
          [title]="timelineTypeTexts.availableItemsTitle | translate"
        >
          {{ timelineTypeTexts.availableItemsTitle | translate }}
        </p>
        <div class="d-flex">
          <div
            class="input-group input-group-search m-t-4"
            id="search"
            *ngIf="!(loadingItems$ | async)"
          >
            <input
              class="form-control"
              placeholder="Filter…"
              type="search"
              [ngModel]="filterString"
              (ngModelChange)="filterStringChanged($event)"
            />
            <span class="input-group-addon">
              <i
                c8yIcon="search"
                *ngIf="!filterString; else clearFilterString"
              ></i>
              <ng-template #clearFilterString>
                <i
                  class="text-muted"
                  c8yIcon="times"
                  *ngIf="filterString"
                  (click)="filterStringChanged()"
                ></i>
              </ng-template>
            </span>
          </div>
        </div>
      </div>

      <ng-container *ngIf="filteredItems$ | async as filteredItems; else loadingData">
        <ng-container *ngIf="!(loadingItems$ | async); else loadingData">
          <ng-container *ngIf="items$ | async as items">
            <div class="p-16 bg-level-2 separator-bottom">
              <div>
                <p>
                  <i
                    class="text-info m-r-4"
                    c8yIcon="info-circle"
                  ></i>
                  <strong>{{ timelineTypeTexts.recentItemsWarningTitle | translate }}</strong>
                </p>
                <p>
                  {{ timelineTypeTexts.recentItemsWarningText | translate }}
                  {{ timelineTypeTexts.addCustomText | translate }}
                </p>
              </div>
              <div class="p-t-16">
                <button
                  class="btn btn-default btn-sm"
                  aria-controls="collapseCustomItemForm"
                  [attr.aria-expanded]="isExpanded"
                  (click)="isExpanded = !isExpanded"
                >
                  {{ timelineTypeTexts.addCustomItemButtonLabel | translate }}
                </button>
                <div
                  class="collapse"
                  id="collapseCustomItemForm"
                  [collapse]="!isExpanded"
                  [isAnimated]="true"
                >
                  <div [style.min-height]="'230px'">
                    <c8y-custom-alarm-event-form
                      class="d-block"
                      *ngIf="isExpanded"
                      [timelineType]="timelineType"
                      [target]="assetSelection | async"
                      [omitProperties]="omitProperties"
                      [defaultColor]="defaultColor"
                      (added)="itemAdded($event); isExpanded = false"
                      (cancel)="isExpanded = false"
                      [selectedItems]="selectedItems"
                    ></c8y-custom-alarm-event-form>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="p-16"
              *ngIf="!filteredItems.length"
            >
              <c8y-ui-empty-state
                [icon]="timelineTypeTexts.emptyStateIcon"
                [title]="timelineTypeTexts.emptyStateTitle | translate"
                [subtitle]="
                  items.length
                    ? ('Try another filter term.' | translate)
                    : (timelineTypeTexts.assetWithNoItemsEmptyStateSubtitle | translate)
                "
                [horizontal]="true"
              ></c8y-ui-empty-state>
            </div>

            <c8y-list-group>
              <c8y-list-item
                class="sticky-top"
                style="top: 72px"
                *ngIf="items.length > maxNumberOfItems && filteredItems.length >= maxNumberOfItems"
              >
                <div class="alert alert-warning m-b-0">
                  {{ timelineTypeTexts.largeNumberOfItemsInfo | translate }}
                </div>
              </c8y-list-item>
              <c8y-alarm-event-selector-list-item
                class="d-contents"
                [ngModel]="item"
                [isSelected]="selectedItems | includesAlarmOrEvent: item"
                (added)="itemAdded($event)"
                (removed)="itemRemoved($event)"
                [highlightText]="filterStringChanges$ | async"
                [timelineType]="timelineType"
                [hideSource]="hideSource"
                *ngFor="let item of filteredItems; trackBy: trackByFn"
              ></c8y-alarm-event-selector-list-item>
            </c8y-list-group>
          </ng-container>
        </ng-container>
      </ng-container>
    </div>
  </div>

  <!-- last column  -->
  <div class="inner-scroll bg-level-1">
    <p
      class="text-medium m-b-4 p-l-16 p-r-16 p-t-8 p-b-8 separator-bottom sticky-top text-truncate"
      [title]="timelineTypeTexts.selectedItemsTitle | translate"
    >
      {{ timelineTypeTexts.selectedItemsTitle | translate }}
    </p>
    <div class="d-flex flex-wrap gap-8 p-l-16 p-r-16 p-b-16">
      <c8y-ui-empty-state
        [icon]="timelineTypeTexts.emptyStateIcon"
        [title]="timelineTypeTexts.noSelectedItemsTitle | translate"
        *ngIf="!selectedItems || !selectedItems.length"
        [horizontal]="true"
      ></c8y-ui-empty-state>

      <div
        [ngClass]="{
          'c8y-alarm-pill': timelineType === 'ALARM',
          'c8y-event-pill': timelineType === 'EVENT'
        }"
        *ngFor="let selectedItem of selectedItems"
      >
        <button
          [title]="'Remove' | translate"
          type="button"
          [ngClass]="{
            'c8y-alarm-pill__btn': timelineType === 'ALARM',
            'c8y-event-pill__btn': timelineType === 'EVENT'
          }"
          (click)="itemRemoved(selectedItem)"
        >
          <i
            class="icon-14"
            c8yIcon="remove"
          ></i>
        </button>
        <div
          class="c8y-datapoint-pill__label"
          [title]="selectedItem.label || selectedItem.filters.type"
        >
          <span
            class="circle-icon-wrapper circle-icon-wrapper--small m-r-4"
            [style.background-color]="selectedItem.color || defaultColor"
          >
            <i
              class="stroked-icon"
              [c8yIcon]="timelineType === 'ALARM' ? 'bell' : 'c8y-events'"
            ></i>
          </span>
          <span class="text-truncate">
            <span class="text-truncate">{{ selectedItem.label || selectedItem.filters.type }}</span>
            <small
              class="text-muted text-10"
              *ngIf="!hideSource && selectedItem?.__target?.name"
            >
              {{ selectedItem?.__target?.name }}
            </small>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>