<div class="cell cell-first cell-day-of-week"></div>
<div class="cell cell-day-of-week">M</div>
<div class="cell cell-day-of-week">D</div>
<div class="cell cell-day-of-week">M</div>
<div class="cell cell-day-of-week">D</div>
<div class="cell cell-day-of-week">F</div>
<div class="cell cell-day-of-week">S</div>
<div class="cell cell-day-of-week">S</div>

@for (week of weeks$ | async; track week) {
  <div class="cell cell-first cell-calendar-week center">KW {{ week.week }}</div>
  @for (date of week.dates; track date) {
    <div class="cell cell-calendar-day center" [uiCalendarCell]="date" (click)="selectDate(date)">
      <div class="day center">{{ date | date: 'd' }}</div>
      @if (!calendar.loading) {
        <div class="indicators">
          @for (indicator of indicators$ | async | uiFilterIndicatorsByDate: date; track indicator) {
            <div
              class="indicator"
              [style.backgroundColor]="indicator.color"
            ></div>
          }
        </div>
      } @else {
        <ui-skeleton-loader class="flex items-center justify-center mt-1" [width]="30" [height]="20"></ui-skeleton-loader>
      }
    </div>
  }
}
