<div class="m-l-auto d-flex p-t-4 p-b-4 p-r-4">
  <div class="m-l-auto d-flex a-i-center">
    @if (config.isAutoRefreshEnabled) {
      <label
        class="m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink"
        title=" {{ 'Auto refresh' | translate }}"
      >
        {{ 'Auto refresh' | translate }}
      </label>
    }
    <div class="input-group">
      <label
        class="toggle-countdown"
        [class.toggle-countdown-disabled]="isAutoRefreshDisabled"
        [attr.aria-label]="toggleCountdownButtonTooltipText"
        [tooltip]="toggleCountdownButtonTooltipText"
        placement="bottom"
        [adaptivePosition]="false"
        [container]="'body'"
        [delay]="500"
      >
        <input
          type="checkbox"
          data-cy="c8y-alarms-widget--interval-toggle-button"
          (click)="onToggleCountdownButtonState($event, WIDGET_TYPE_VALUES.ASSET_TABLE)"
        />

        @if (isIntervalRefreshToggleOn) {
          <c8y-countdown-interval
            [countdownInterval]="refreshInterval"
            (countdownEnded)="countdownEnded()"
          ></c8y-countdown-interval>
        } @else {
          <i c8yIcon="pause"></i>
        }
      </label>
    </div>
  </div>
</div>