@if (vm$ | async; as vm) {
	<ng-container *transloco="let t">
		<div class="flex flex-col flex-auto overflow-hidden mt-4 mb-2">
			<div class="relative flex flex-col flex-auto overflow-auto bg-gray-50">
				<table>
					<thead>
						<tr>
							<th
								[ngStyle]="{
									'min-width': headerRowWidth + 'px',
									'max-width': headerRowWidth + 'px',
									height: rowHeight + 'px',
								}">
								<div class="flex items-center">
									<div class="w-2/3">Table</div>
									<div class="w-1/3 text-xs text-gray-500">| Persons</div>
								</div>
							</th>
							@for (hour of hours; track hour) {
								<th
									[ngStyle]="{
										'min-width': rowWidth + 'px',
										'max-width': rowWidth + 'px',
										height: rowHeight + 'px',
									}">
									{{ hour }}:00
								</th>
							}
						</tr>
					</thead>

					<tbody>
						@for (table of vm.tables; track table) {
							<tr class="relative scale-x-100">
								<td
									[ngStyle]="{
										'min-width': headerRowWidth + 'px',
										'max-width': headerRowWidth + 'px',
										height: rowHeight + 'px',
									}">
									<div class="flex items-center">
										<div
											class="w-2/3 text-sm"
											[ngClass]="{ 'text-red-400': table.id === unassignedTableId }">
											{{ table.name }}
										</div>
										@if (table.id !== unassignedTableId) {
											<div class="w-1/3 flex items-center space-x-4 text-xs text-gray-500">
												<div>| {{ table.capacity }}</div>
												<svg
													lucideUser
													size="16" />
											</div>
										}
									</div>
								</td>

								@for (hour of hours; track hour) {
									<td
										[ngStyle]="{
											'min-width': rowWidth + 'px',
											'max-width': rowWidth + 'px',
											height: rowHeight + 'px',
										}"></td>
								}

								@for (reservation of table.reservations; track reservation) {
									<td
										#origin
										(click)="openDetails(reservation, origin)"
										class="absolute top-0 rounded-xl px-4 py-1 opacity-80 border-none cursor-pointer reservation-{{
											reservation.state.toLowerCase()
										}}-bg"
										[ngClass]="{ late: reservation.ref.isLate }"
										[ngStyle]="{
											left:
												(reservation.ref.startDate | calendarColumnLeftPosition: rowWidth : headerRowWidth : hours) +
												'px',
											width: (reservation.ref | calendarReservationWidth: rowWidth) + 'px',
										}">
										<div class="flex items-center justify-between h-full">
											<div class="text-sm">
												<div class="font-medium truncate max-w-24">{{ reservation.ref.customerData.name }}</div>
												<div class="flex items-center space-x-1">
													<div>{{ reservation.ref.noOfPersons }}</div>
													<svg
														lucideUser
														size="16" />
												</div>
											</div>

											<kadi-overlay [transparentBackdrop]="true">
												<svg
													*kadiOverlayTrigger
													lucideEllipsisVertical />
												<div
													class="w-full p-4 bg-white shadow-lg rounded-xl"
													*kadiOverlayContent>
													<ul class="space-y-4">
														<li
															class="cursor-pointer"
															(click)="edit(reservation)"
															kadiOverlayCloseTrigger>
															{{ t('Edit') }}
														</li>
														@for (option of reservation.state | stateOptions; track option) {
															<li
																class="cursor-pointer"
																(click)="updateState(reservation, option.target)"
																kadiOverlayCloseTrigger>
																{{ t(option.title) }}
															</li>
														}
													</ul>
												</div>
											</kadi-overlay>
										</div>
									</td>
								}
							</tr>
						}
					</tbody>
				</table>

				@if (showCurrentTime) {
					@if (currentTime$ | async; as currentTime) {
						<div
							class="time-divider"
							[ngStyle]="{
								left: (currentTime | calendarColumnLeftPosition: rowWidth : headerRowWidth : hours) + 'px',
								height: rowHeight * (vm.tables.length + 1) - 10 + 'px',
							}">
							<div class="time-divider__wrapper">
								<div class="time-divider__wrapper__circle"></div>
								<div class="time-divider__wrapper__line"></div>
							</div>
						</div>
					}
				}
			</div>
		</div>
	</ng-container>
}