@if (metricForDay(); as metric) {
  <div class="radio-group">
    <label>{{ T.F.METRIC.EVAL_FORM.IMPACT_OF_WORK | translate }}</label>
    <impact-stars
      #impactOfWork="ngModel"
      (ngModelChange)="updateImpactOfWork($event)"
      [ngModel]="metric.impactOfWork || 0"
      name="impactOfWork"
      [maxStars]="4"
      ariaLabel="How impactful was your work today?"
      zeroLabel="No impact"
      lowLabel="Low impact"
      highLabel="High impact"
    ></impact-stars>
    <div class="hint">{{ T.F.METRIC.EVAL_FORM.IMPACT_OF_WORK_HINT | translate }}</div>
  </div>

  <div class="radio-group">
    <label>{{ T.F.METRIC.EVAL_FORM.ENERGY_LEVEL | translate }}</label>
    <mat-radio-group
      #energyCheckin="ngModel"
      (ngModelChange)="updateEnergyCheckin($event)"
      [ngModel]="metric.energyCheckin"
      name="energyCheckin"
    >
      <mat-radio-button [value]="1">😫</mat-radio-button>
      <mat-radio-button [value]="2">😐</mat-radio-button>
      <mat-radio-button [value]="3">😊</mat-radio-button>
    </mat-radio-group>
    <div class="hint">{{ T.F.METRIC.EVAL_FORM.ENERGY_LEVEL_HINT | translate }}</div>
  </div>

  @if (hasProductivityData() && hasSustainabilityData()) {
    <div class="daily-state-card">
      <div
        class="daily-state-label"
        [matTooltip]="T.F.METRIC.EVAL_FORM.DAILY_STATE_TOOLTIP | translate"
        matTooltipPosition="above"
      >
        {{ T.F.METRIC.EVAL_FORM.DAILY_STATE | translate }}
      </div>
      <div class="daily-state-title">
        <span class="daily-state-icon">{{ dailyStateInfo().icon }}</span>
        <span>{{ dailyStateInfo().headlineKey | translate }}</span>
      </div>
      <div class="daily-state-hint">{{ dailyStateInfo().hintKey | translate }}</div>
    </div>
  }

  @if (hasProductivityData() || hasSustainabilityData()) {
    <div class="scores-container">
      @if (hasProductivityData()) {
        <div
          class="score-card productivity"
          [style.background]="getScoreColor(productivityScore())"
        >
          <div
            class="label"
            [matTooltip]="T.F.METRIC.EVAL_FORM.PRODUCTIVITY_SCORE_TOOLTIP | translate"
            matTooltipPosition="above"
          >
            {{ T.F.METRIC.EVAL_FORM.PRODUCTIVITY_SCORE | translate }}
          </div>
          <div class="score-row">
            <div class="score">{{ productivityScore() }}</div>
          </div>
          @if (productivitySummary(); as summary) {
            @if (summary.average !== null) {
              <div class="trend-row">
                <button
                  type="button"
                  class="trend-pill"
                  (click)="openScoreBreakdown('productivity')"
                  [ngClass]="getTrendClass(summary.trend)"
                >
                  <span class="pill-title">7d</span>
                  <span class="pill-value">{{ summary.average }}</span>
                  <span class="pill-delta">{{ getTrendDelta(summary.trend) }}</span>
                </button>
              </div>
            }
          }
        </div>
      }

      @if (hasSustainabilityData()) {
        <div
          class="score-card sustainability"
          [style.background]="getScoreColor(sustainabilityScore())"
        >
          <div
            class="label"
            [matTooltip]="T.F.METRIC.EVAL_FORM.SUSTAINABILITY_SCORE_TOOLTIP | translate"
            matTooltipPosition="above"
          >
            {{ T.F.METRIC.EVAL_FORM.SUSTAINABILITY_SCORE | translate }}
          </div>
          <div class="score-row">
            <div class="score">{{ sustainabilityScore() }}</div>
          </div>
          @if (sustainabilitySummary(); as summary) {
            @if (summary.average !== null) {
              <div class="trend-row">
                <button
                  type="button"
                  class="trend-pill"
                  (click)="openScoreBreakdown('sustainability')"
                  [ngClass]="getTrendClass(summary.trend)"
                >
                  <span class="pill-title">7d</span>
                  <span class="pill-value">{{ summary.average }}</span>
                  <span class="pill-delta">{{ getTrendDelta(summary.trend) }}</span>
                </button>
              </div>
            }
          }
        </div>
      }
    </div>
  }

  <div class="time-summary">
    <div class="time-item">
      <span class="time-label">{{
        T.F.METRIC.EVAL_FORM.FOCUS_WORK_TIME | translate
      }}</span>
      <span class="time-value">{{ deepWorkTime() | msToClockString }}</span>
    </div>

    <div class="time-item">
      <span class="time-label">{{
        T.F.METRIC.EVAL_FORM.TOTAL_WORK_TIME | translate
      }}</span>
      <span class="time-value">{{ totalWorkTimeMs() | msToClockString }}</span>
    </div>
  </div>

  <reflection-note [dayStr]="day()"></reflection-note>

  <!--      <section class="notes-for-tomorrow">-->
  <!--        <h3 class="section-title">-->
  <!--          {{ T.F.METRIC.EVAL_FORM.NOTES_SECTION_TITLE | translate }}-->
  <!--        </h3>-->
  <!--        <mat-form-field>-->
  <!--          <mat-label>{{ T.F.METRIC.EVAL_FORM.NOTES | translate }}</mat-label>-->
  <!--          <textarea-->
  <!--            #notes="ngModel"-->
  <!--            (ngModelChange)="updateNotes($event)"-->
  <!--            [ngModel]="metricForDay.notes"-->
  <!--            matInput-->
  <!--            name="notes"-->
  <!--            rows="4"-->
  <!--          ></textarea>-->
  <!--        </mat-form-field>-->

  <!--        <div class="checkbox-container">-->
  <!--          <mat-checkbox-->
  <!--            #remindTomorrow="ngModel"-->
  <!--            (ngModelChange)="updateRemindTomorrow($event)"-->
  <!--            [ngModel]="metricForDay.remindTomorrow"-->
  <!--            name="remindTomorrow"-->
  <!--          >-->
  <!--            {{ T.F.METRIC.EVAL_FORM.REMIND_TOMORROW | translate }}-->
  <!--          </mat-checkbox>-->
  <!--        </div>-->
  <!--      </section>-->
}