<h2 mat-dialog-title>{{ titleKey | translate }}</h2>

<div mat-dialog-content>
  @if (breakdown$ | async; as breakdown) {
    @if (chartData$ | async; as chartData) {
      <div class="chart-section">
        <lazy-chart
          [type]="lineChartType"
          [datasets]="chartData.datasets"
          [labels]="chartData.labels"
          [options]="lineChartOptions"
          [legend]="true"
          height="300px"
          [shareFileName]="'7-day-scores.png'"
        ></lazy-chart>
      </div>
    }

    <table class="breakdown-table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Score</th>
          <th>Impact</th>
          <th>Energy</th>
          <th>Focused (min)</th>
          <th>Total Work (min)</th>
        </tr>
      </thead>
      <tbody>
        @for (item of breakdown; track item) {
          <tr>
            <td>{{ item.day }}</td>
            <td>{{ item.score ?? '-' }}</td>
            <td>{{ item.impactRating ?? '-' }}</td>
            <td>
              @if (item.energyCheckin === 1) {
                😫
              } @else if (item.energyCheckin === 2) {
                😐
              } @else if (item.energyCheckin === 3) {
                😊
              } @else {
                -
              }
            </td>
            <td>{{ item.focusedMinutes | number: '1.0-1' }}</td>
            <td>{{ item.totalWorkMinutes | number: '1.0-1' }}</td>
          </tr>
        }
      </tbody>
    </table>
  } @else {
    <div class="no-data">No productivity data available for the selected range.</div>
  }
</div>

<div
  mat-dialog-actions
  align="end"
>
  <button
    mat-button
    (click)="close()"
  >
    {{ T.G.CLOSE | translate }}
  </button>
</div>
