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

<form
  class="row"
  [formGroup]="formGroup"
>
  <div class="form-group col-md-12">
    <div class="d-flex a-i-center">
      <label
        class="m-b-0"
        translate
      >
        Date selection
      </label>
      <button
        class="btn-help btn-help--sm"
        [attr.aria-label]="'Help' | translate"
        [popover]="dateSelectionHelpTemplate"
        placement="bottom"
        triggers="focus"
        container="body"
        [adaptivePosition]="false"
      ></button>
    </div>
    <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="col-md-6">
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>
      <c8y-form-group class="m-b-0">
        <div
          class="d-flex m-b-8 a-i-center"
          *ngFor="let order of orderList; let i = index"
        >
          <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>
    <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')
        }"
      >
        <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">
    <fieldset
      class="c8y-fieldset"
      formArrayName="status"
    >
      <legend>{{ 'Status' | translate }}</legend>
      <c8y-form-group
        [hasError]="formGroup.controls.status.hasError('required')"
        [ngClass]="{
          'm-b-8': !formGroup.controls.status.hasError('required')
        }"
      >
        <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>

    <fieldset class="c8y-fieldset">
      <legend>{{ 'Child devices' | translate }}</legend>
      <c8y-form-group class="m-b-8">
        <label
          class="c8y-switch"
          [title]="'Show alarms from child devices' | translate"
        >
          <input
            type="checkbox"
            formControlName="showAlarmsForChildren"
          />
          <span></span>
          <span>{{ 'Show alarms' | translate }}</span>
          <span class="sr-only">{{ 'Show alarms' | translate }}</span>
        </label>
      </c8y-form-group>
    </fieldset>

    <fieldset class="c8y-fieldset">
      <legend>{{ 'Types' | translate }}</legend>
      <c8y-form-group
        class="m-b-8"
        formArrayName="types"
      >
        <div
          class="input-group"
          *ngFor="let type of types.controls; let i = index"
        >
          <input
            class="form-control"
            type="text"
            [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }"
            [formControlName]="i"
          />
          <div class="input-group-btn">
            <button
              class="btn btn-dot btn-dot--danger m-l-auto"
              [title]="'Remove' | translate"
              type="button"
              (click)="removeType(i)"
              [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 btn-dot btn-dot--primary m-l-auto"
              [title]="'Add alarm type' | translate"
              type="button"
              (click)="addType()"
            >
              <i c8yIcon="plus-circle"></i>
            </button>
          </div>
        </div>
      </c8y-form-group>
    </fieldset>
    <fieldset class="c8y-fieldset">
      <legend class="d-flex">
        {{ 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>
      </legend>
      <c8y-form-group class="m-b-8 form-group-sm">
        <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"
          >
            <label
              class="m-b-0"
              for="refreshInterval"
            >
              {{ 'Interval' | translate }}
            </label>
            <div class="c8y-select-wrapper flex-grow">
              <select
                class="form-control text-12"
                [title]="'Refresh interval in seconds' | translate"
                id="refreshInterval"
                formControlName="refreshInterval"
              >
                <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>
    </fieldset>
  </div>
</form>

<div class="legend form-block m-b-0">{{ 'Preview`of an alarm list`' | translate }}</div>
<c8y-alarms-list
  [alarms]="alarms$ | async"
  [isInitialLoading]="isLoading"
  [navigationOptions]="{
    allowNavigationToAlarmsView: false,
    alwaysNavigateToAllAlarms: false,
    includeClearedQueryParams: false,
    queryParamsHandling: 'merge'
  }"
></c8y-alarms-list>

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