Mode
{#each modeOptions as opt (opt.value)}
(item.cardData.mode = opt.value as TimerMode)} class={[ 'rounded-xl border px-3 py-2 text-left transition-colors', cardData.mode === opt.value ? 'border-accent-500 bg-accent-500/10 text-accent-700 dark:text-accent-300' : 'border-base-300 dark:border-base-700 hover:bg-base-100 dark:hover:bg-base-800' ]} >
{opt.label}
{opt.desc}
{/each}
{#if cardData.mode === 'clock'}
Timezone
(item.cardData.timezone = e.currentTarget.value)} class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 flex-1 rounded-xl border px-3 py-2" > {#each timezoneOptions as tz (tz.value)}
{tz.label}
{/each}
Local
{/if} {#if cardData.mode === 'event'}
Target Date & Time
updateTargetDate(e.currentTarget.value, targetTimeValue)} class="flex-1" />
updateTargetDate(targetDateValue, e.currentTarget.value)} class="w-28" />
{/if}