Calendar - {data.org.name}

All day event {#if !eventAllDay}

Start

End

{/if}

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

{#if isOrgCalendarConnected && eventFormMode === "create"}
			<label
				class="flex items-center gap-3 text-sm text-light cursor-pointer p-3 rounded-lg bg-light/5 border border-light/10"
			>
				<input
					type="checkbox"
					bind:checked={syncToGoogleCal}
					class="rounded"
				/>
				<div class="flex items-center gap-2">
					<svg class="w-4 h-4 text-blue-400" viewBox="0 0 24 24">
						<path
							fill="currentColor"
							d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
						/>
						<path
							fill="currentColor"
							d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
						/>
						<path
							fill="currentColor"
							d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
						/>
						<path
							fill="currentColor"
							d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
						/>
					</svg>
					<span>Sync to Google Calendar</span>
				</div>
			</label>
		{/if}

<div class="flex justify-end gap-2 pt-2">
			<Button
				variant="tertiary"
				onclick={() => (showEventFormModal = false)}
				>{m.btn_cancel()}</Button
			>
			<Button
				onclick={handleSaveEvent}
				loading={isSavingEvent}
				disabled={!eventTitle.trim() || !eventDate}
				>{eventFormMode === "edit"
					? m.btn_save()
					: m.btn_create()}</Button
			>
		</div>
	</div>
</Modal>