<div class="calendar" [ngClass]="mode">
  <div class="header">
    <ng-container>
      <div class="placeholder"></div>
      <div class="navigation">
        <button class="button back" (click)="navigateBack()">
          <img src="assets/images/Arrow_left.svg" width="10px" alt="back button" />
        </button>
        <div class="title">{{ i18n.month[month] }} {{ year }}</div>
        <button class="button next" (click)="navigateForth()">
          <img src="assets/images/Arrow_right.svg" width="10px" alt="back button" />
        </button>
      </div>
    </ng-container>
  </div>

  <table class="body">
    <thead>
      <tr class="row">
        <th></th>
        <th>M</th>
        <th>D</th>
        <th>M</th>
        <th>D</th>
        <th>F</th>
        <th>S</th>
        <th>S</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <ng-container *ngIf="mode === 'month'">
        <tr class="row" *ngFor="let kw of dateAdapter.getDatesAndCalendarWeeksForMonth(year, month)">
          <td (click)="onClickDetails({ year: year, month: month, week: kw.week })" class="kw-cell" [attr.week]="kw.week">
            KW {{ kw.week }}
          </td>
          <td
            (click)="onClickDetails({ year: year, month: month, date: day.getDate() })"
            class="day-cell"
            [attr.day]="day.getDate()"
            [class.out-of-month]="day.getMonth() + 1 !== month"
            *ngFor="let day of kw.dates"
          >
            <div class="day" [class.is-sunday]="day.getDay() === 0">
              {{ day.getDate() }}
            </div>
            <div class="items">
              <ng-container
                *ngFor="
                  let item of !showAllTasks
                    ? (items | calendarItemsFilterPipe: day | calendarItemsFilterUniqueStatusTypePipe)
                    : (items | calendarItemsFilterPipe: day)
                "
              >
                <span
                  *ngIf="item.type === 'Task'"
                  class="indicator"
                  [style.backgroundColor]="item.color"
                  [title]="item.title"
                  (click)="viewDetails.emit(item.id)"
                >
                </span>
                <span
                  *ngIf="item.type === 'Info'"
                  class="indicator info"
                  [style.backgroundColor]="item.color"
                  [title]="item.title"
                  (click)="viewDetails.emit(item.id)"
                  >i</span
                >
              </ng-container>
            </div>
          </td>
        </tr>
      </ng-container>
      <ng-container *ngIf="mode === 'week'">
        <tr class="row">
          <td class="kw-cell" [attr.week]="week">KW {{ week }}</td>
          <td class="day-cell" [attr.day]="day.getDate()" *ngFor="let day of dateAdapter.getDatesForCalendarWeek(year, week)">
            <div class="day">
              {{ day.getDate() }}
            </div>
            <div class="items">
              <span
                class="indicator"
                [style.backgroundColor]="item.color"
                [title]="item.title"
                *ngFor="
                  let item of !showAllTasks
                    ? (items | calendarItemsFilterPipe: day | calendarItemsFilterUniqueStatusTypePipe)
                    : (items | calendarItemsFilterPipe: day)
                "
                (click)="item.action()"
              >
              </span>
            </div>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>
