@if (!shouldShowPulseIcon()) {
  <div
    class="time-elapsed"
    [title]="
      '{{ secondsLeft }} s / {{ interval }} s'
        | translate
          : { secondsLeft: secondsUntilRefresh$ | async, interval: countdownInterval / 1000 }
    "
    data-cy="c8y-countdown-interval--countdown"
  >
    <svg
      style="transform: rotate(-90deg)"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        [style.stroke-dashoffset]="100 - (progressPercentage$ | async)"
        [style.transition]="(enableTransition$ | async) ? 'stroke-dashoffset 0.2s linear' : 'none'"
        cx="20"
        cy="20"
        r="15.8"
        stroke="var(--c8y-brand-primary)"
        stroke-width="6"
        stroke-dasharray="100"
      />
    </svg>

    <span data-cy="c8y-countdown-interval--seconds">{{ secondsUntilRefresh$ | async }}</span>
  </div>
} @else {
  <div class="p-relative a-s-stretch no-pointer d-flex a-i-center j-c-center">
    <span
      class="c8y-pulse active m-0"
      data-cy="global-context--pulse-icon"
    ></span>
  </div>
}