<form
  class="d-flex a-i-center"
  [formGroup]="formGroup"
>
  <div
    class="dropdown"
    title="{{ 'Filter by severity' | translate }}"
    container="body"
    dropdown
    #filtersDropdown="bs-dropdown"
    [cdkTrapFocus]="filtersDropdown.isOpen"
    [insideClick]="true"
  >
    <div class="input-group fit-w">
      <div
        class="form-control d-flex a-i-center inner-scroll"
        style="min-width: 104px; padding-top: 0; padding-bottom: 0"
      >
        @if (chips.length !== severitiesList.length) {
          @for (chip of chips; track chip) {
            <span
              class="tag tag--info chip"
              [attr.data-cy]="'c8y-alarms-filter--chip-' + chip"
            >
              <button
                class="btn btn-xs btn-clean text-10"
                title="{{ 'Remove' | translate }}"
                type="button"
                data-cy="c8y-alarms-filter--remove-chip"
                c8yProductExperience
                [actionName]="PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS"
                [actionData]="{
                  component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,
                  action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.REMOVE_CHIP_FILTER,
                  filterValues: {
                    severities: formGroup.value,
                    showCleared: showCleared
                  }
                }"
                (click)="deselectChip(chip); $event.stopPropagation()"
              >
                <i c8yIcon="times"></i>
              </button>
              <i
                class="status stroked-icon icon-12"
                [c8yIcon]="chip | AlarmSeverityToIcon"
                [attr.data-cy]="'c8y-alarms-filter--icon-' + chip"
                [ngClass]="chip | lowercase"
              ></i>
              {{ SEVERITY_LABELS[chip] | translate }}
            </span>
          }
        } @else {
          <span
            class="text-truncate"
            title="{{ 'All severities' | translate }}"
          >
            {{ 'All severities' | translate }}
          </span>
        }
      </div>
      <div class="input-group-btn input-group-btn--last">
        <button
          class="btn-default btn btn--caret"
          title="{{ chips | AlarmSeveritiesToTitle }}"
          data-cy="c8y-alarms-filter"
          dropdownToggle
          (click)="resetForm()"
        >
          <i class="caret"></i>
        </button>
      </div>
    </div>
    <ul
      class="dropdown-menu dropdown-menu-action-bar"
      *dropdownMenu
    >
      <li class="p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center sticky-top separator-bottom">
        <label
          class="c8y-checkbox d-flex a-i-center"
          [title]="'All' | translate"
        >
          <input
            type="checkbox"
            data-cy="c8y-alarms-filter--all"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="allChanged($event)"
            [ngModel]="isEachCheckboxSelected$ | async"
            [indeterminate]="isIndeterminate$ | async"
            (click)="markSeveritiesAsTouched()"
          />
          <span></span>
          <i
            class="status stroked-icon m-l-8 icon-20"
            [c8yIcon]="'bell'"
          ></i>
          <span class="m-l-8">{{ 'All' | translate }}</span>
        </label>
      </li>
      @for (severity of severitiesList; track severity) {
        <li class="p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center">
          <label
            class="c8y-checkbox d-flex a-i-center"
            [title]="SEVERITY_LABELS[severity] | translate"
          >
            <input
              type="checkbox"
              [attr.data-cy]="'c8y-alarms-filter--' + severity"
              [formControlName]="severity"
              [value]="severity"
              (click)="markSeveritiesAsTouched()"
            />
            <span></span>
            <i
              class="status stroked-icon m-l-8 icon-20"
              [c8yIcon]="severity | AlarmSeverityToIcon"
              [ngClass]="severity | lowercase"
            ></i>
            <span class="m-l-8">{{ SEVERITY_LABELS[severity] | translate }}</span>
          </label>
          <!-- badge -->
          @if (alarmCounts[severity] || alarmCounts[severity] === 0) {
            <div class="badge badge-info m-l-auto">
              @if (countLoading) {
                <i
                  class="icon-spin"
                  [c8yIcon]="'circle-o-notch'"
                ></i>
              }
              @if (!countLoading) {
                <span [attr.data-cy]="'c8y-alarms-filter--' + severity + '-badge'">
                  {{ alarmCounts[severity] < 99 ? alarmCounts[severity] : '99+' }}
                </span>
              }
            </div>
          }
        </li>
      }
      <li class="p-l-16 p-r-16 p-t-4 p-b-4 d-flex a-i-center separator-top">
        <label
          class="c8y-switch"
          [attr.aria-label]="'Show cleared alarms' | translate"
          [attr.data-cy]="'c8y-alarms-filter--cleared'"
        >
          <input
            type="checkbox"
            #showClearedCheckbox
            [ngModelOptions]="{ standalone: true }"
            [(ngModel)]="showCleared"
            (click)="markSeveritiesAsTouched(); updateAlarmsCount(showClearedCheckbox.checked)"
          />
          <span></span>
          <span
            class="text-truncate"
            title="{{ 'Show cleared alarms' | translate }}"
          >
            {{ 'Show cleared alarms' | translate }}
          </span>
        </label>
      </li>
      <li class="p-16 d-flex sticky-bottom separator-top">
        <button
          class="btn btn-primary btn-sm flex-grow"
          title="{{ 'Apply' | translate }}"
          type="button"
          data-cy="c8y-alarms-filter--apply"
          c8yProductExperience
          [actionName]="PRODUCT_EXPERIENCE_ALARMS.EVENTS.ALARMS"
          [actionData]="{
            component: PRODUCT_EXPERIENCE_ALARMS.COMPONENTS.ALARMS_FILTER,
            action: PRODUCT_EXPERIENCE_ALARMS.ACTIONS.APPLY_FILTER,
            filterValues: {
              severities: formGroup.value,
              showCleared: showCleared
            }
          }"
          (click)="applyFilters(false); closeDropdown()"
          [disabled]="shouldDisableApplyButton$ | async"
        >
          {{ 'Apply' | translate }}
        </button>
      </li>
    </ul>
  </div>
</form>