<form
  class="d-flex a-i-center fit-w fit-h"
  [formGroup]="toggleIntervalForm"
>
  <label class="m-b-0 m-r-8 text-normal text-muted flex-no-shrink">
    {{ 'Auto refresh' | translate }}
  </label>
  <div class="input-group">
    <label
      class="toggle-countdown"
      [class.toggle-countdown-disabled]="isDisabled"
      [attr.aria-label]="getTooltip() | translate"
      [tooltip]="getTooltip() | translate"
      placement="bottom"
      [adaptivePosition]="false"
      [delay]="500"
      data-cy="c8y-alarms-interval-refresh--toggle-countdown"
    >
      <input
        type="checkbox"
        data-cy="c8y-alarms-interval-toggle"
        formControlName="intervalToggle"
        (click)="trackUserClickOnIntervalToggle($event.target)"
      />
      @if (isIntervalToggleEnabled) {
        <c8y-countdown-interval
          [countdownInterval]="toggleIntervalForm.value.refreshInterval"
          (countdownEnded)="onCountdownEnded.emit()"
        ></c8y-countdown-interval>
      } @else {
        <i
          c8yIcon="pause"
          data-cy="c8y-alarms-interval-refresh--pause"
        ></i>
      }
    </label>
    @if (!isDisabled) {
      <div class="c8y-select-wrapper">
        <select
          class="form-control text-12"
          [attr.aria-label]="'Refresh interval in seconds' | translate"
          [tooltip]="'Refresh interval in seconds' | translate"
          placement="bottom"
          [adaptivePosition]="false"
          [delay]="500"
          [container]="'body'"
          formControlName="refreshInterval"
          data-cy="c8y-alarms-interval-refresh--selector"
        >
          @for (refreshInterval of refreshIntervalsInMilliseconds; track refreshInterval) {
            <option
              [disabled]="isDisabled"
              [ngValue]="refreshInterval"
              [attr.data-cy]="'c8y-interval-' + refreshInterval"
            >
              {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}
            </option>
          }
        </select>
        <span></span>
      </div>
    }
    <div class="input-group-btn">
      <button
        class="btn btn-default"
        style="border-left: 0"
        [attr.aria-label]="'Refresh' | translate"
        [tooltip]="'Refresh' | translate"
        placement="bottom"
        type="button"
        [adaptivePosition]="false"
        [delay]="500"
        [disabled]="isDisabled || (alarmsListLoading$ | async)"
        (click)="onCountdownEnded.emit()"
        data-cy="c8y-alarms-interval-refresh--btn"
      >
        <i
          c8yIcon="refresh"
          [ngClass]="{ 'icon-spin': alarmsListLoading$ | async }"
        ></i>
      </button>
    </div>
  </div>
</form>