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

@if (formGroup) {
  <form
    class="row d-flex flex-wrap"
    [formGroup]="formGroup"
  >
    <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-8">
          @for (order of orderList; track order; let i = $index) {
            <div
              class="d-flex p-b-8 p-t-4 a-i-center"
              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"
        formGroupName="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"
        >
          @for (severityOption of severityList; track severityOption) {
            <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>
              @let severityIcon = severityOption | severityIcon;
              <i
                class="a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}"
                [c8yIcon]="severityIcon.c8yIcon"
              ></i>
              <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>
            </label>
          }
          <c8y-messages>
            @if (formGroup.controls.severities.hasError('required')) {
              <c8y-message>
                {{ 'Select at least one severity.' | translate }}
              </c8y-message>
            }
          </c8y-messages>
        </c8y-form-group>
      </fieldset>
      @if (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>
      }
    </div>

    <div class="col-md-6 col-xs-12">
      <fieldset
        class="c8y-fieldset"
        formGroupName="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"
        >
          @for (statusOption of statusList; track statusOption) {
            <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>
          }
          <c8y-messages>
            @if (formGroup.controls.status.hasError('required')) {
              <c8y-message>
                {{ '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"
        >
          @for (type of types.controls; track type; let i = $index) {
            <div
              class="input-group m-b-4"
              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>
              @if (i === types.controls.length - 1) {
                <div class="input-group-btn">
                  <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>
  @if ((config$ | async)?.displayMode !== 'dashboard') {
    <c8y-local-controls
      [controls]="controls"
      [displayMode]="(config$ | async)?.displayMode"
      [config]="config$ | async"
      [disabled]="true"
    ></c8y-local-controls>
  }
  <c8y-alarms-list
    [alarms]="alarms$ | async"
    [isInPreviewMode]="true"
    [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>