{#each spaces as space (space.id)} {@const status = spaceStatus[space.id] || { isOccupied: false }} handleSpaceClick(space)} class="absolute p-2 border-2 rounded-lg shadow-md transition-all overflow-hidden flex items-center justify-center {space.type !== 'AMENITY' ? 'hover:scale-105 cursor-pointer' : 'cursor-default opacity-80'} {status.isOccupied ? 'bg-yellow-50 border-yellow-500' : 'bg-green-50 border-green-500'}" style="left: 0; top: 0; width: {(space.width / 100) * containerWidth}px; height: {(space.height / 100) * containerHeight}px; transform: translate({(space.x / 100) * containerWidth}px, {(space.y / 100) * containerHeight}px)" title="{space.name} ({status.isOccupied ? 'Booked' : 'Available'})" >

{#if status.isOccupied && space.type === 'DESK'}

{/if}

{space.name} {#if status.isOccupied && space.type === 'DESK'} {status.reservation?.user?.name || status.reservation?.user?.email.split('@')[0]} {/if}

{/each}