@if (worklogService.worklogData$ | async; as wData) {
  <div [@fadeInSlow]>
    <h1 class="mat-headline-5 total-time">
      {{ T.F.WORKLOG.CMP.TOTAL_TIME | translate }} <br /><strong>{{
        wData.totalTimeSpent | msToString
      }}</strong>
    </h1>
    <div class="years">
      @for (
        year of wData.worklog | keyvalue: sortWorklogItems;
        track trackByKey($index, year)
      ) {
        <div class="year">
          <h1
            [innerHtml]="year.key"
            class="year-title mat-headline-5"
          ></h1>
          <div class="year-time-spent">
            {{ T.F.WORKLOG.CMP.MONTH_WORKED | translate }}
            <strong>{{ year.value.monthWorked }}</strong
            ><br />
            {{ T.F.WORKLOG.CMP.DAYS_WORKED | translate }}
            <strong>{{ year.value.daysWorked }}</strong
            ><br />
            {{ T.F.WORKLOG.CMP.TOTAL_TIME | translate }}
            <strong [innerHtml]="year.value.timeSpent | msToString"></strong>
          </div>
          <div class="months">
            @for (
              month of year.value.ent | keyvalue: sortWorklogItems;
              track trackByKey($index, month)
            ) {
              <div class="month">
                <h2 class="month-title mat-headline-5">
                  <span [innerHtml]="month.key | numberToMonth"></span>
                  <button
                    (click)="exportData(month.value, year.key, month.key)"
                    aria-label="export data"
                    class="mat-elevation-z1"
                    color="primary"
                    mat-mini-fab
                  >
                    <mat-icon>call_made</mat-icon>
                  </button>
                </h2>
                <div class="month-time-spent">
                  {{ T.F.WORKLOG.CMP.DAYS_WORKED | translate }}
                  <strong>{{ month.value.daysWorked }}</strong
                  ><br />
                  {{ T.F.WORKLOG.CMP.TOTAL_TIME | translate }}
                  <strong [innerHtml]="month.value.timeSpent | msToString"></strong>
                </div>
                <div class="weeks">
                  @for (week of month.value.weeks; track trackByForWeek($index, week)) {
                    <div class="week">
                      <div class="week-header">
                        <div class="wrap">
                          <h3 class="week-title mat-h4">
                            {{ T.F.WORKLOG.CMP.WEEK_NR | translate: { nr: week.weekNr } }}
                          </h3>
                          <div>{{ week.timeSpent | msToString }}</div>
                        </div>
                        <button
                          (click)="
                            exportData(month.value, year.key, month.key, week.weekNr)
                          "
                          [matTooltip]="
                            week.start +
                            '.-' +
                            week.end +
                            '. Days: ' +
                            week.daysWorked +
                            ', Time: ' +
                            (week.timeSpent | msToString)
                          "
                          aria-label="export data"
                          class="mat-elevation-z1"
                          color=""
                          mat-mini-fab
                        >
                          <mat-icon>call_made</mat-icon>
                        </button>
                      </div>
                      <div class="week-table-wrapper">
                        <table class="week-table">
                          <tr>
                            <th></th>
                            <td>{{ T.F.WORKLOG.CMP.TASKS | translate }}</td>
                            <td>{{ T.F.WORKLOG.CMP.WORKED | translate }}</td>
                            <th></th>
                          </tr>
                          @for (
                            worklogForDay of week.ent | keyvalue: sortWorklogItemsReverse;
                            track trackByKey($index, worklogForDay)
                          ) {
                            <ng-container class="day">
                              <tr
                                (click)="
                                  expanded[worklogForDay.value.dateStr] =
                                    !expanded[worklogForDay.value.dateStr]
                                "
                                [class.isExpanded]="expanded[worklogForDay.value.dateStr]"
                                class="week-row"
                              >
                                <td>
                                  {{ worklogForDay.value.dayStr }}
                                  {{ worklogForDay.key }}.
                                </td>
                                <td>{{ worklogForDay.value.logEntries.length }}</td>
                                <td>
                                  {{ worklogForDay.value.timeSpent | msToClockString }}
                                </td>
                                <td>
                                  @if (!expanded[worklogForDay.value.dateStr]) {
                                    <mat-icon>list </mat-icon>
                                  }
                                  @if (expanded[worklogForDay.value.dateStr]) {
                                    <mat-icon>close </mat-icon>
                                  }
                                </td>
                              </tr>
                              <tr>
                                <td colspan="4">
                                  @if (expanded[worklogForDay.value.dateStr]) {
                                    <div
                                      [@expandFade]
                                      class="summary-table-wrapper material-table"
                                    >
                                      <table class="task-summary-table">
                                        @for (
                                          logEntry of worklogForDay.value.logEntries;
                                          track trackByForLogEntry($index, logEntry)
                                        ) {
                                          <tr
                                            [id]="'t-' + logEntry.task.id"
                                            tabindex="0"
                                          >
                                            <td
                                              [class.isSubTask]="logEntry.task.parentId"
                                              class="title"
                                            >
                                              @if (workContextService.isTodayList) {
                                                <div
                                                  class="project-color"
                                                  [title]="
                                                    allProjectsColorAndTitle[
                                                      logEntry.task.projectId
                                                    ]?.title
                                                  "
                                                  [style.background]="
                                                    allProjectsColorAndTitle[
                                                      logEntry.task.projectId
                                                    ]?.color
                                                  "
                                                ></div>
                                              }
                                              @if (logEntry.task.repeatCfgId) {
                                                <mat-icon
                                                  [title]="
                                                    T.F.WORKLOG.CMP.REPEATING_TASK
                                                      | translate
                                                  "
                                                  class="repeat-task-icon"
                                                  >repeat
                                                </mat-icon>
                                              }
                                              <span class="task-title">{{
                                                logEntry.task.title
                                              }}</span>
                                            </td>
                                            <td class="worked">
                                              @if (
                                                logEntry.task.subTaskIds &&
                                                logEntry.task.subTaskIds.length > 0
                                              ) {
                                                <span
                                                  >∑
                                                  {{
                                                    logEntry.task.timeSpentOnDay[
                                                      worklogForDay.value.dateStr
                                                    ] | msToClockString
                                                  }}</span
                                                >
                                              }
                                              @if (
                                                !logEntry.task.subTaskIds ||
                                                !logEntry.task.subTaskIds.length
                                              ) {
                                                <inline-input
                                                  (changed)="
                                                    updateTimeSpentTodayForTask(
                                                      logEntry.task,
                                                      worklogForDay.value.dateStr,
                                                      $event
                                                    )
                                                  "
                                                  [displayValue]="
                                                    logEntry.task.timeSpentOnDay[
                                                      worklogForDay.value.dateStr
                                                    ] | msToClockString
                                                  "
                                                  [type]="'duration'"
                                                  [value]="
                                                    logEntry.task.timeSpentOnDay[
                                                      worklogForDay.value.dateStr
                                                    ]
                                                  "
                                                >
                                                </inline-input>
                                              }
                                            </td>
                                            <td class="actions">
                                              @if (
                                                !logEntry.task?.parentId &&
                                                !logEntry.isNoRestore
                                              ) {
                                                <button
                                                  (click)="restoreTask(logEntry.task)"
                                                  [title]="
                                                    T.F.WORKLOG.CMP
                                                      .RESTORE_TASK_FROM_ARCHIVE
                                                      | translate
                                                  "
                                                  aria-label="restore"
                                                  color=""
                                                  mat-icon-button
                                                >
                                                  <mat-icon
                                                    >settings_backup_restore</mat-icon
                                                  >
                                                </button>
                                              }
                                            </td>
                                          </tr>
                                        }
                                      </table>
                                    </div>
                                  }
                                </td>
                              </tr>
                            </ng-container>
                          }
                        </table>
                      </div>
                    </div>
                  }
                </div>
              </div>
            }
          </div>
        </div>
      }
    </div>
  </div>
} @else {
  <full-page-spinner></full-page-spinner>
}
