@if (selectedTable$ | async; as table) {
	<ng-container *transloco="let t">
		<div class="card {{ table.tableState }}">
			<div class="wrapper">
				<div class="title">
					<div class="font-bold">{{ table.tableNames.join(', ') }}</div>
					<div class="flex items-center gap-3 text-xs">
						<kadi-table-state-badge [table]="table" />

						@if ($any(table.reservation?.state) | stateOptions; as options) {
							@if (table.reservation && options.length > 0) {
								<kadi-overlay [transparentBackdrop]="true">
									<svg
										*kadiOverlayTrigger
										lucideEllipsisVertical
										size="24" />
									<div
										class="w-full p-4 bg-white shadow-lg rounded-xl"
										*kadiOverlayContent>
										<ul class="space-y-4">
											@if (table.reservation) {
												<li
													class="cursor-pointer"
													(click)="editReservation(table.reservation)"
													kadiOverlayCloseTrigger>
													{{ t('Edit Reservation') }}
												</li>
												@for (option of options; track option) {
													<li
														class="cursor-pointer"
														(click)="updateState(table, option.target)"
														kadiOverlayCloseTrigger>
														{{ t(option.title) }}
													</li>
												}
											}
										</ul>
									</div>
								</kadi-overlay>
							}
						}

						<button>
							<svg
								lucideX
								size="24" />
						</button>
					</div>
				</div>

				<div class="text-xs font-bold text-gray-400">{{ t('Name') }}</div>
				<div class="flex justify-between">
					<div class="font-medium w-max">
						{{ table.reservation?.customerData?.name ?? '-' }}
					</div>

					<div class="flex items-center gap-3">
						<svg
							lucideUser
							size="14" />
						<div class="font-bold">{{ table.reservation?.noOfPersons ?? 0 }} {{ t('Persons') }}</div>
					</div>
				</div>

				<div class="py-2">
					<div class="text-xs font-bold text-gray-400">{{ t('Phone No') }}.</div>
					<div class="font-medium w-max">
						{{ table.reservation?.customerData?.phoneNumber ?? '+49' }}
					</div>
				</div>

				<div class="py-2">
					<p class="text-xs font-bold text-gray-400">{{ t('Email Address') }}</p>
					<div class="font-medium w-max">
						{{ table.reservation?.customerData?.email ?? t('-') }}
					</div>
				</div>

				@if (table?.tableState === TableState.taken) {
					<div class="flex items-center justify-between py-2">
						<div>
							<p class="text-xs font-bold text-gray-400">{{ t('Payment Status') }}</p>
							@if ((table?.order?.outstandingAmount ?? 0) > 0) {
								<div class="text-red">
									{{ t('Outstanding Balance') }}
								</div>
							}
							@if ((table?.order?.outstandingAmount ?? 0) === 0) {
								<div class="text-green">
									{{ t('Paid') }}
								</div>
							}
						</div>
						<svg
							class="text-red-500"
							lucideFileText
							size="24" />
					</div>
				}

				@if (table.reservation) {
					<div class="py-2">
						<div class="text-xs font-bold text-gray-400">{{ t('Reservation') }}</div>
						<div class="flex justify-between">
							<div class="font-medium">
								{{ (table.reservation.startDate | date: 'ccc, dd. MMMM' : _settingsStore.timezoneOffset()) ?? '-' }}
							</div>
							<div class="flex gap-3">
								<div></div>
								<div class="font-bold">
									{{ table.reservation.startDate | date: 'HH:mm' : _settingsStore.timezoneOffset() }} -
									{{ table.reservation.endDate | date: 'HH:mm' : _settingsStore.timezoneOffset() }}
								</div>
							</div>
						</div>
					</div>
				}

				@if (table.reservation?.comment) {
					<div class="py-2">
						<div class="text-xs font-bold text-gray-400">{{ t('Comment') }}</div>
						<div
							class="text-xs truncate max-w-sm italic"
							[title]="table.reservation?.comment">
							{{ table.reservation?.comment }}
						</div>
					</div>
				}
			</div>

			<!-- Check In-->
			@if (table.tableState === TableState.approved) {
				<button
					class="button"
					(click)="updateState(table, ReservationState.seated)">
					{{ t('Check In') }}
					<svg
						class="inline"
						lucideArrowRightToLine
						size="20" />
				</button>
			}

			<!-- Direct Check In -->
			@if (table.tableState === TableState.free) {
				<button
					class="button"
					[kadiLoadingButton]="loading"
					(click)="updateState(table, TableState.taken)">
					{{ t('Check In Directly') }}
					<svg
						class="inline"
						lucidePlusCircle
						size="20" />
				</button>
			}

			<!-- Checkout -->
			@if (table.tableState === TableState.taken) {
				<button
					class="button"
					[kadiLoadingButton]="loading"
					(click)="updateState(table, table.reservation ? ReservationState.done : TableState.free)">
					{{ t('Check Out') }}
					<svg
						class="inline"
						lucideArrowRightFromLine
						size="20" />
				</button>
			}

			<!-- Confirm or Reject -->
			@if (table.tableState === TableState.unconfirmed) {
				<div class="flex w-full rounded-b-xl">
					<button
						(click)="updateState(table, ReservationState.approved)"
						class="button confirm">
						{{ t('Confirm') }}
					</button>
					<button
						(click)="updateState(table, ReservationState.rejected)"
						class="button reject">
						{{ t('Reject') }}
					</button>
				</div>
			}
		</div>
	</ng-container>
}