<ui-calendar-header></ui-calendar-header>
<ui-calendar-body></ui-calendar-body>
<!-- <div class="calendar" [ngClass]="mode">
  <div class="header">
    <ng-container>
      <div class="placeholder"></div>
      <div class="navigation">
        <button class="button back" (click)="navigateBack()">
          <ui-icon icon="arrow_head" size="18px" rotate="180deg" alt="back button"></ui-icon>
        </button>
        <div class="title">{{ dateAdapter.getMonthName(dateAdapter.getMonth(selected)) }} {{ dateAdapter.getYear(selected) }}</div>
        <button class="button next" (click)="navigateForth()">
          <ui-icon icon="arrow_head" size="18px" alt="back button"></ui-icon>
        </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(selected)">
          <td (click)="selectedChange.emit(kw.dates[0])" class="kw-cell" [attr.week]="kw.week">KW {{ kw.week }}</td>
          <td
            class="day-cell"
            [attr.day]="day.getDate()"
            [class.out-of-month]="day.getMonth() !== dateAdapter.getMonth(selected)"
            *ngFor="let day of kw.dates"
          >
            <div class="day" [class.is-sunday]="day.getDay() === 0" (click)="selectDay(day)">
              <span [class.today]="dateAdapter.equals(today, day)" [class.today]="dateAdapter.equals(selected, day)">
                {{ day.getDate() }}
              </span>
            </div>
            <div class="items">
              <ng-container *ngFor="let item of items | calendarItemsFilter: day | calendarItemsFilterUniqueStatusType">
                <span
                  *ngIf="item.type === 'Task'"
                  class="indicator"
                  [style.backgroundColor]="item.color"
                  [title]="item.label"
                  (click)="itemSelected.emit(item)"
                >
                </span>
                <span
                  *ngIf="item.type === 'Info'"
                  class="indicator info"
                  [style.backgroundColor]="item.color"
                  [title]="item.label"
                  (click)="itemSelected.emit(item)"
                  >i</span
                >
              </ng-container>
            </div>
          </td>
        </tr>
      </ng-container>
      <ng-container *ngIf="mode === 'week'">
        <tr class="row" *ngIf="dateAdapter.getCalendarWeek(selected); let kw">
          <td class="kw-cell" [attr.week]="kw">KW {{ kw }}</td>
          <td
            class="day-cell"
            [attr.day]="day.getDate()"
            *ngFor="let day of dateAdapter.getDatesForCalendarWeek(dateAdapter.getYear(selected), kw)"
          >
            <div class="day" (click)="selectDay(day)">
              <span [class.today]="dateAdapter.equals(today, day)" [class.selected]="dateAdapter.equals(selected, day)">
                {{ day.getDate() }}
              </span>
            </div>
            <div class="items">
              <span
                class="indicator"
                [style.backgroundColor]="item.color"
                [title]="item.label"
                *ngFor="let item of items | calendarItemsFilter: day | calendarItemsFilterUniqueStatusType"
                (click)="itemSelected.emit(item)"
              >
              </span>
            </div>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div> -->
