<div class="wrapper">
  @if (simpleMetrics(); as sm) {
    <section
      class="basic-stats"
      [@fade]
    >
      <div class="metrics-header">
        <h1 class="mat-h1">
          {{ metricsTitle() | translate }}
        </h1>
        <share-button
          [payload]="sharePayload()"
          [tooltip]="'Share your productivity stats'"
        />
      </div>
      <!--  <h2>Basic Metrics</h2>-->
      <p>
        <i>{{ sm.start }} – {{ sm.end }}</i>
      </p>
      <div class="material-table">
        <table>
          <tr>
            <th>{{ T.F.METRIC.CMP.TIME_SPENT | translate }}</th>
            <td>{{ sm.timeSpent | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.TIME_ESTIMATED | translate }}</th>
            <td>{{ sm.timeEstimate | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.TASKS_DONE_CREATED | translate }}</th>
            <td>{{ sm.nrOfCompletedTasks }} / {{ sm.nrOfAllTasks }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.DAYS_WORKED | translate }}</th>
            <td>{{ sm.daysWorked }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TASKS_PER_DAY_WORKED | translate }}</th>
            <td>{{ sm.avgTasksPerDay | number: '1.0-1' }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_BREAKS_PER_DAY | translate }}</th>
            <td>{{ sm.avgBreakNr | number: '1.0-1' }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TIME_SPENT_PER_DAY | translate }}</th>
            <td>{{ sm.avgTimeSpentOnDay | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TIME_SPENT_PER_TASK | translate }}</th>
            <td>{{ sm.avgTimeSpentOnTask | msToString }}</td>
          </tr>
          <tr>
            <th>
              {{ T.F.METRIC.CMP.AVG_TIME_SPENT_PER_TASK | translate }}
              <br />{{ T.F.METRIC.CMP.COUNTING_SUBTASKS | translate }}
            </th>
            <td>{{ sm.avgTimeSpentOnTaskIncludingSubTasks | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TIME_SPENT_ON_BREAKS | translate }}</th>
            <td>{{ sm.avgBreakTime | msToString }}</td>
          </tr>
        </table>
      </div>
    </section>
  }

  <section class="heatmap-section">
    <activity-heatmap></activity-heatmap>
  </section>

  @if (isShowingAllTasks()) {
    @if (metricService.hasData()) {
      <section class="metric-metrics">
        <h1>{{ T.F.METRIC.CMP.GLOBAL_METRICS | translate }}</h1>
        <section class="line-charts">
          @if (productivityBreakdownChartData(); as breakdownChart) {
            @if (breakdownChart) {
              <section>
                <h3>{{ T.F.METRIC.CMP.PRODUCTIVITY_BREAKDOWN_OVER_TIME | translate }}</h3>
                <lazy-chart
                  [type]="lineChartType"
                  [datasets]="breakdownChart.datasets"
                  [labels]="breakdownChart.labels"
                  [legend]="true"
                  [options]="lineChartOptions"
                  height="400px"
                  [shareFileName]="'productivity-sustainability-breakdown.png'"
                  [enableTimeframeSelector]="true"
                >
                </lazy-chart>
              </section>
            }
          }
          @if (focusSessionData(); as focusSessions) {
            @if (focusSessions.labels?.length) {
              <section>
                <h3>{{ T.F.METRIC.CMP.FOCUS_SESSION_TRENDS | translate }}</h3>
                <lazy-chart
                  [type]="lineChartType"
                  [datasets]="focusSessions.datasets"
                  [labels]="focusSessions.labels"
                  [legend]="true"
                  [options]="lineChartOptions"
                  height="400px"
                  [shareFileName]="'focus-session-trends.png'"
                  [enableTimeframeSelector]="true"
                ></lazy-chart>
              </section>
            }
          }
        </section>
      </section>
      <section class="metric-metrics">
        <h2>{{ T.F.METRIC.CMP.SIMPLE_COUNTERS | translate }}</h2>
        <section class="line-charts">
          @if (simpleClickCounterData(); as simpleCounterClickData) {
            <section>
              <h3>{{ T.F.METRIC.CMP.SIMPLE_CLICK_COUNTERS_OVER_TIME | translate }}</h3>
              <lazy-chart
                [type]="lineChartType"
                [datasets]="simpleCounterClickData.datasets"
                [labels]="simpleCounterClickData.labels"
                [options]="lineChartOptions"
                [legend]="true"
                height="400px"
                [shareFileName]="'simple-click-counters-over-time.png'"
                [enableTimeframeSelector]="true"
              >
              </lazy-chart>
            </section>
          }
          @if (simpleCounterStopWatchData(); as simpleCounterStopWatchData) {
            <section>
              <h3>
                {{ T.F.METRIC.CMP.SIMPLE_STOPWATCH_COUNTERS_OVER_TIME | translate }}
              </h3>
              <lazy-chart
                [type]="lineChartType"
                [datasets]="simpleCounterStopWatchData.datasets"
                [labels]="simpleCounterStopWatchData.labels"
                [options]="lineChartOptions"
                [legend]="true"
                height="400px"
                [shareFileName]="'simple-stopwatch-counters-over-time.png'"
                [enableTimeframeSelector]="true"
              >
              </lazy-chart>
            </section>
          }
        </section>
      </section>
    } @else {
      <p class="no-data-msg">
        {{ T.F.METRIC.CMP.NO_ADDITIONAL_DATA_YET | translate }}
      </p>
    }
  }
</div>
