<div class="focus-mode-break">
  <h1>
    {{
      (focusModeService.isBreakLong()
        ? T.F.FOCUS_MODE.LONG_BREAK_TITLE
        : T.F.FOCUS_MODE.SHORT_BREAK_TITLE
      ) | translate: { cycle: focusModeService.currentCycle() - 1 }
    }}
  </h1>

  <div class="timer-container">
    <mat-progress-spinner
      mode="determinate"
      [value]="progressPercentage()"
      diameter="160"
      strokeWidth="6"
    >
    </mat-progress-spinner>
    <div class="timer-text">
      {{ remainingTime() | msToClockString: true }}
    </div>
    @if (remainingTime() > 0) {
      @if (isBreakPaused()) {
        <button
          mat-icon-button
          [matTooltip]="T.F.FOCUS_MODE.RESUME_BREAK | translate"
          (click)="resumeBreak()"
          class="pause-resume-btn"
        >
          <mat-icon>play_arrow</mat-icon>
        </button>
      } @else {
        <button
          mat-icon-button
          [matTooltip]="T.F.FOCUS_MODE.PAUSE_BREAK | translate"
          (click)="pauseBreak()"
          class="pause-resume-btn"
        >
          <mat-icon>pause</mat-icon>
        </button>
      }
    }
  </div>

  <task-tracking-info></task-tracking-info>

  <p class="break-message">{{ T.F.FOCUS_MODE.BREAK_RELAX_MSG | translate }}</p>

  @if (remainingTime() > 0) {
    <div class="button-row">
      <button
        mat-stroked-button
        (click)="exitToPlanning()"
      >
        <mat-icon>edit_calendar</mat-icon>
        {{ T.F.FOCUS_MODE.BACK_TO_PLANNING | translate }}
      </button>
      <button
        mat-stroked-button
        (click)="skipBreak()"
      >
        <mat-icon>skip_next</mat-icon>
        {{ T.F.FOCUS_MODE.SKIP_BREAK | translate }}
      </button>
    </div>
  } @else {
    <div class="button-row">
      <button
        mat-stroked-button
        (click)="completeBreak()"
      >
        <mat-icon>done_all</mat-icon>
        {{ T.G.COMPLETE | translate }}
      </button>

      <button
        mat-raised-button
        color="primary"
        (click)="completeBreak()"
      >
        <mat-icon>arrow_forward</mat-icon>
        {{ T.F.FOCUS_MODE.CONTINUE_TO_NEXT_SESSION | translate }}
      </button>
    </div>
  }
</div>
