<div
  class="p-l-24 p-r-24"
  [style.pointer-events]="'auto'"
  [style.opacity]="1"
></div>

<form
  class="row d-flex flex-wrap"
  [formGroup]="formGroup"
>
  <div class="col-xs-12">
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Date' | translate }}</legend>
      <div class="form-group form-group-sm m-b-16">
        <label class="d-flex a-i-center">
          <span translate>Date selection</span>
          <button
            class="btn-help btn-help--sm"
            [attr.aria-label]="'Help' | translate"
            [popover]="dateSelectionHelpTemplate"
            placement="bottom"
            triggers="focus"
            container="body"
            [adaptivePosition]="false"
          ></button>
        </label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control input-sm"
            [ngModel]="dateSelection"
            (ngModelChange)="dateSelectionChange($event)"
            [ngModelOptions]="{ standalone: true }"
          >
            <option
              title="{{ 'Widget configuration' | translate }}"
              [value]="DATE_SELECTION.CONFIG"
            >
              {{ 'Widget configuration' | translate }}
            </option>
            <option
              title="{{ 'Widget and widget configuration' | translate }}"
              [value]="DATE_SELECTION.VIEW_AND_CONFIG"
            >
              {{ 'Widget and widget configuration' | translate }}
            </option>
            <option
              title="{{ 'Dashboard time range' | translate }}"
              [value]="DATE_SELECTION.DASHBOARD_CONTEXT"
            >
              {{ 'Dashboard time range' | translate }}
            </option>
          </select>
          <span></span>
        </div>
      </div>
      <div class="row tight-grid">
        <div class="col-md-7">
          <ng-container *ngIf="showDateFilter">
            <c8y-form-group class="m-b-16 form-group-sm">
              <label>{{ 'Date filter' | translate }}</label>
              <c8y-alarms-date-filter
                [updateQueryParams]="false"
                [DEFAULT_INTERVAL]="config.interval || 'none'"
                formControlName="dateFilter"
                (dateFilterChange)="onDateFilterChange($event)"
              ></c8y-alarms-date-filter>
            </c8y-form-group>
          </ng-container>
        </div>
        <div class="col-md-5">
          <c8y-form-group class="m-b-16 form-group-sm">
            <label class="d-flex a-i-center">
              {{ refreshTypeTitle }}
              <button
                class="btn-help btn-help--sm"
                [attr.aria-label]="'Help' | translate"
                [popover]="refreshTypePopoverMessage"
                placement="top"
                triggers="focus"
                container="body"
                type="button"
                [adaptivePosition]="true"
              ></button>
            </label>
            <div class="d-flex gap-8 a-i-center">
              <ng-template #realtime>
                <label class="c8y-switch">
                  <input
                    id="refreshToggle"
                    name="isAutoRefreshEnabled"
                    type="checkbox"
                    formControlName="isAutoRefreshEnabled"
                  />
                  <span></span>
                  <span class="sr-only">{{ 'Realtime refresh' | translate }}</span>
                </label>
              </ng-template>
              <div
                class="c8y-select-wrapper"
                *ngIf="!config.isRealtime; else realtime"
              >
                <select
                  class="form-control"
                  title="{{ 'Refresh options`options for refreshing a view`' | translate }}"
                  [(ngModel)]="refreshOption"
                  [ngModelOptions]="{ standalone: true }"
                  (change)="updateRefreshOption()"
                >
                  <option value="none">
                    {{ 'No automatic refresh' | translate }}
                  </option>
                  <option
                    [title]="'Refreshing after the given interval' | translate"
                    value="interval"
                  >
                    {{ 'Use refresh interval' | translate }}
                  </option>
                  <option
                    [title]="'Refreshing after the given interval, synchronized globally' | translate"
                    value="global-interval"
                  >
                    {{ 'Use global refresh interval' | translate }}
                  </option>
                </select>
              </div>
              <ng-container
                *ngIf="!config.isRealtime && config.refreshOption !== GLOBAL_INTERVAL_OPTION"
              >
                <div class="c8y-select-wrapper flex-grow flex-no-shrink" title=" {{ 'Interval' | translate }}">
                  <select
                    class="form-control text-12"
                    [title]="'Refresh interval in seconds' | translate"
                    id="refreshInterval"
                    formControlName="refreshInterval"
                    data-cy="c8y-alarm-list-widget-config--interval-selector"
                  >
                    <option
                      *ngFor="let refreshInterval of REFRESH_INTERVAL_IN_MILLISECONDS"
                      [ngValue]="refreshInterval"
                    >
                      {{ '{{ seconds }}s' | translate: { seconds: refreshInterval / 1000 } }}
                    </option>
                  </select>
                </div>
              </ng-container>
            </div>
          </c8y-form-group>
        </div>
      </div>
    </fieldset>
  </div>

  <div class="col-md-6 col-xs-12">
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>
      <c8y-form-group class="m-b-8">
        <div
          class="d-flex p-b-8 p-t-4 a-i-center"
          *ngFor="let order of orderList; let i = index"
          data-cy="c8y-alarm-list-widget-config--order-elements"
        >
          <label
            class="c8y-radio gap-4"
            title="{{ ALARM_ORDER_LABELS[order] | translate }}"
          >
            <input
              type="radio"
              [value]="order"
              formControlName="order"
            />
            <span class="a-s-center"></span>
            <span class="text-truncate">{{ ALARM_ORDER_LABELS[order] | translate }}</span>
          </label>
          <button
            class="btn-help btn-help--sm"
            [attr.aria-label]="'Help' | translate"
            [popover]="order | sortingDescriptionPopoverMessage | translate"
            placement="right"
            triggers="focus"
            container="body"
            type="button"
            [adaptivePosition]="true"
          ></button>
        </div>
      </c8y-form-group>
    </fieldset>
  </div>
  <div class="col-md-6 col-xs-12">
    <fieldset
      class="c8y-fieldset"
      formArrayName="severities"
    >
      <legend>{{ 'Severities' | translate }}</legend>
      <c8y-form-group
        [hasError]="formGroup.controls.severities.hasError('required')"
        [ngClass]="{
          'm-b-8': !formGroup.controls.severities.hasError('required')
        }"
        data-cy="c8y-alarm-list-widget-config--severities-elements"
      >
        <ng-container *ngFor="let severityOption of severityList">
          <label
            class="c8y-checkbox m-t-0 gap-4"
            [title]="SEVERITY_LABELS[severityOption] | translate"
          >
            <input
              type="checkbox"
              [formControlName]="severityOption"
              [name]="severityOption"
            />
            <span class="a-s-center"></span>
            <ng-container *ngIf="{ result: severityOption | severityIcon } as severityIcon">
              <i
                class="a-s-center m-r-4 icon-20 {{ severityIcon.result.iconClass }}"
                [c8yIcon]="severityIcon.result.c8yIcon"
              ></i>
            </ng-container>
            <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>
          </label>
        </ng-container>
        <c8y-messages>
          <c8y-message *ngIf="formGroup.controls.severities.hasError('required')">
            {{ 'Select at least one severity.' | translate }}
          </c8y-message>
        </c8y-messages>
      </c8y-form-group>
    </fieldset>
    <ng-container *ngIf="showDateFilter">
      <fieldset class="c8y-fieldset">
        <legend>{{ 'Date filter' | translate }}</legend>
        <c8y-form-group class="m-b-8">
          <c8y-alarms-date-filter
            [updateQueryParams]="false"
            [DEFAULT_INTERVAL]="config.interval || 'none'"
            formControlName="dateFilter"
            (dateFilterChange)="onDateFilterChange($event)"
          ></c8y-alarms-date-filter>
        </c8y-form-group>
      </fieldset>
    </ng-container>
  </div>

  <div class="col-md-6 col-xs-12">
    <fieldset
      class="c8y-fieldset"
      formArrayName="status"
    >
      <legend data-cy="c8y-alarm-list-widget-config-status-label">
        {{ 'Status' | translate }}
      </legend>
      <c8y-form-group
        [hasError]="formGroup.controls.status.hasError('required')"
        [ngClass]="{
          'm-b-8': !formGroup.controls.status.hasError('required')
        }"
        data-cy="c8y-alarm-list-widget-config--status-elements"
      >
        <ng-container *ngFor="let statusOption of statusList">
          <label
            class="c8y-checkbox m-t-0 gap-4"
            [title]="STATUS_LABELS[statusOption] | translate"
          >
            <input
              type="checkbox"
              [formControlName]="statusOption"
              [name]="statusOption"
            />
            <span class="a-s-center"></span>
            <i
              class="a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20"
              [c8yIcon]="
                statusOption === CLEARED_STATUS_VALUE
                  ? C8Y_ALERT_IDLE_ICON
                  : statusOption === ACKNOWLEDGE_STATUS_VALUE
                    ? BELL_SLASH_ICON
                    : BELL_ICON
              "
            ></i>
            <span>{{ STATUS_LABELS[statusOption] | translate }}</span>
          </label>
        </ng-container>
        <c8y-messages>
          <c8y-message *ngIf="formGroup.controls.status.hasError('required')">
            {{ 'Select at least one status.' | translate }}
          </c8y-message>
        </c8y-messages>
      </c8y-form-group>
    </fieldset>
  </div>
  <div class="col-md-6 col-xs-12">
    <fieldset
      class="c8y-fieldset"
      data-cy="c8y-alarm-list-widget-config--child-devices-section"
    >
      <legend>{{ 'Child devices' | translate }}</legend>
      <c8y-form-group class="m-b-8">
        <label
          class="c8y-switch"
          [title]="'Show alarms from child devices' | translate"
          data-cy="c8y-alarm-list-widget-config--child-devices-label"
        >
          <input
            type="checkbox"
            formControlName="showAlarmsForChildren"
            data-cy="c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox"
          />
          <span></span>
          <span>{{ 'Show alarms' | translate }}</span>
          <span class="sr-only">{{ 'Show alarms' | translate }}</span>
        </label>
      </c8y-form-group>
    </fieldset>
  </div>
  
  <div class="col-xs-12">
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Types' | translate }}</legend>
      <c8y-form-group
        class="m-b-8"
        formArrayName="types"
      >
        <div
          class="input-group m-b-4"
          *ngFor="let type of types.controls; let i = index"
          data-cy="c8y-alarm-list-widget-config--types-elements"
        >
          <input
            class="form-control"
            type="text"
            [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }"
            [formControlName]="i"
          />
          <div class="input-group-btn">
            <button
              class="btn-dot btn-dot--danger m-l-auto"
              [title]="'Remove' | translate"
              type="button"
              (click)="removeType(i)"
              data-cy="c8y-alarm-list-widget-config--types-remove-type"
              [disabled]="types.controls?.length === 1 && !type.value"
            >
              <i c8yIcon="minus-circle"></i>
            </button>
          </div>
          <div
            class="input-group-btn"
            *ngIf="i === types.controls.length - 1"
          >
            <button
              class="btn-dot btn-dot--primary m-l-auto"
              [title]="'Add alarm type' | translate"
              type="button"
              (click)="addType()"
              data-cy="c8y-alarm-list-widget-config--types-add-type"
            >
              <i c8yIcon="plus-circle"></i>
            </button>
          </div>
        </div>
      </c8y-form-group>
    </fieldset>
  </div>
</form>

<ng-template #alarmListPreview>
  <c8y-alarms-list
    [alarms]="alarms$ | async"
    [isInitialLoading]="isLoading"
    [navigationOptions]="{
      allowNavigationToAlarmsView: false,
      alwaysNavigateToAllAlarms: false,
      includeClearedQueryParams: false,
      queryParamsHandling: 'merge'
    }"
    data-cy="c8y-alarm-list-widget-config--preview-alarm-list"
  ></c8y-alarms-list>
</ng-template>

<ng-template #dateSelectionHelpTemplate>
  <div [innerHTML]="dateSelectionHelp"></div>
</ng-template>