@for (row of rows; track row; let rowIndex = $index) {
    <tr role="row">
        @for (item of row; track item; let colIndex = $index) {
            <td
                class="owl-dt-calendar-cell {{ item.cellClass }}"
                [tabindex]="isActiveCell(rowIndex, colIndex) ? 0 : -1"
                [class.owl-dt-calendar-cell-active]="
                    isActiveCell(rowIndex, colIndex)
                "
                [class.owl-dt-calendar-cell-disabled]="!item.enabled"
                [class.owl-dt-calendar-cell-in-range]="isInRange(item.value)"
                [class.owl-dt-calendar-cell-range-from]="
                    isRangeFrom(item.value)
                "
                [class.owl-dt-calendar-cell-range-to]="isRangeTo(item.value)"
                [attr.aria-label]="item.ariaLabel"
                [attr.aria-disabled]="!item.enabled || null"
                [attr.aria-current]="item.value === todayValue ? 'date' : null"
                [attr.aria-selected]="isSelected(item.value)"
                [style.width.%]="100 / numCols"
                [style.paddingTop.%]="(50 * cellRatio) / numCols"
                [style.paddingBottom.%]="(50 * cellRatio) / numCols"
                (click)="selectCell(item)"
            >
                <span
                    class="owl-dt-calendar-cell-content"
                    [ngClass]="{
                        'owl-dt-calendar-cell-out': item.out,
                        'owl-dt-calendar-cell-today': item.value === todayValue,
                        'owl-dt-calendar-cell-selected': isSelected(item.value),
                    }"
                >
                    {{ item.displayValue }}
                </span>
                <div class="owl-dt-calendar-cell-agendas">
                    @for (agenda of item.agendas.slice(0, 3); track agenda; let i = $index) {
                        <div
                            class="owl-dt-calendar-cell-agenda"
                            [class.owl-dt-calendar-cell-agenda--more]="i === 2 && item.agendas.length > 3"
                            [style.width.%]="100 / (item.agendas.length > 3 ? 3 : item.agendas.length)"
                        ></div>
                    }
                </div>
            </td>
        }
    </tr>
}