@if (simpleCounter(); as sc) {
  <div class="wrapper">
    @if (sc.type === SimpleCounterType.StopWatch) {
      @if (sc.isOn) {
        <progress-circle [isPulsing]="true"></progress-circle>
      }
      <button
        (click)="toggleStopwatch()"
        (contextmenu)="edit($event)"
        (longPress)="edit()"
        [color]="sc.isOn ? 'accent' : ''"
        [class.isOn]="sc.isOn"
        class="main-btn stopwatch"
        mat-icon-button
      >
        @if (sc.icon && sc.icon.startsWith(':')) {
          <mat-icon [svgIcon]="sc.icon"></mat-icon>
        } @else if (sc.icon) {
          <mat-icon>{{ sc.icon }}</mat-icon>
        } @else {
          <div class="habit-initial">{{ sc.title.charAt(0).toUpperCase() }}</div>
        }
        @if (isSuccess()) {
          <mat-icon class="check-ico">check</mat-icon>
        }
      </button>
      @if (sc.countOnDay[todayStr()]) {
        <div class="label">{{ sc.countOnDay[todayStr()] | msToMinuteClockString }}</div>
      }
    }
    <!----->
    @if (sc.type === SimpleCounterType.ClickCounter) {
      <button
        (click)="toggleCounter()"
        (contextmenu)="edit($event)"
        (longPress)="edit()"
        class="main-btn"
        color=""
        mat-icon-button
      >
        @if (sc.icon && sc.icon.startsWith(':')) {
          <mat-icon [svgIcon]="sc.icon"></mat-icon>
        } @else if (sc.icon) {
          <mat-icon>{{ sc.icon }}</mat-icon>
        } @else {
          <div class="habit-initial">{{ sc.title.charAt(0).toUpperCase() }}</div>
        }
        @if (isSuccess()) {
          <mat-icon class="check-ico">check</mat-icon>
        }
      </button>
      @if (sc.countOnDay[todayStr()]) {
        <div class="label">{{ sc.countOnDay[todayStr()] }}</div>
      }
    }
    <!----->
    @if (sc.type === SimpleCounterType.RepeatedCountdownReminder) {
      @let countdownTime = countdownTime$ | async;
      @if (sc.isOn && hasVisibleCountdownTime(sc, countdownTime)) {
        <progress-circle
          [progress]="calcCountdownProgress(countdownTime, sc.countdownDuration)"
        ></progress-circle>
      }
      <button
        (click)="isTimeUp() ? countUpAndNextRepeatCountdownSession() : toggleStopwatch()"
        (contextmenu)="edit($event)"
        (longPress)="edit()"
        [color]="sc.isOn && !isTimeUp() ? 'accent' : ''"
        [class.isOn]="sc.isOn && !isTimeUp()"
        [class.isTimeUp]="isTimeUp()"
        class="main-btn repeated-countdown"
        mat-icon-button
      >
        @if (sc.icon && sc.icon.startsWith(':')) {
          <mat-icon [svgIcon]="sc.icon"></mat-icon>
        } @else if (sc.icon) {
          <mat-icon>{{ sc.icon }}</mat-icon>
        } @else {
          <div class="habit-initial">{{ sc.title.charAt(0).toUpperCase() }}</div>
        }
        @if (isSuccess()) {
          <mat-icon class="check-ico">check</mat-icon>
        }
      </button>
      @if (hasVisibleCountdownTime(sc, countdownTime)) {
        <div class="extra-label">{{ countdownTime | msToMinuteClockString }}</div>
      }
      @if (sc.countOnDay[todayStr()] || isTimeUp()) {
        <div class="label">{{ isTimeUp() ? '+' : sc.countOnDay[todayStr()] }}</div>
      }
    }
  </div>
}