<label class="flex items-center gap-2 text-sm text-light">
			<input
				type="checkbox"
				bind:checked={newEvent.allDay}
				class="rounded"
			/>
			All day event
		</label>

{#if !newEvent.allDay}
			<div class="grid grid-cols-2 gap-4">
				<Input
					label="Start Time"
					type="time"
					bind:value={newEvent.startTime}
				/>
				<Input
					label="End Time"
					type="time"
					bind:value={newEvent.endTime}
				/>
			</div>
		{/if}

<div>
			<label class="block text-sm font-medium text-light mb-2"
				>Color</label
			>
			<div class="flex gap-2">
				{#each colorOptions as color}
					<button
						type="button"
						class="w-8 h-8 rounded-full transition-transform"
						class:ring-2={newEvent.color === color.value}
						class:ring-white={newEvent.color === color.value}
						class:scale-110={newEvent.color === color.value}
						style="background-color: {color.value}"
						onclick={() => (newEvent.color = color.value)}
						aria-label={color.label}
					></button>
				{/each}
			</div>
		</div>

<div class="flex justify-end gap-2 pt-2">
			<Button variant="ghost" onclick={resetForm}>Cancel</Button>
			<Button
				onclick={handleCreateEvent}
				disabled={!newEvent.title.trim() || !newEvent.date}
				>Create</Button
			>
		</div>
	</div>
</Modal>

<Modal
	isOpen={showEventModal}
	onClose={() => (showEventModal = false)}
	title={selectedEvent?.title ?? "Event"}
>
	{#if selectedEvent}
		<div class="space-y-3">
			<div class="flex items-center gap-2">
				<div
					class="w-3 h-3 rounded-full"
					style="background-color: {selectedEvent.color ?? '#6366f1'}"
				></div>
				<span class="text-light/70"
					>{formatEventTime(selectedEvent)}</span
				>
			</div>

{#if selectedEvent.description}
				<p class="text-light/80">{selectedEvent.description}</p>
			{/if}

<p class="text-xs text-light/40">
				{new Date(selectedEvent.start_time).toLocaleDateString(
					undefined,
					{
						weekday: "long",
						year: "numeric",
						month: "long",
						day: "numeric",
					},
				)}
			</p>
		</div>
	{/if}
</Modal>