{m.events_title()} | {data.org.name}

e.key === "Escape" && (showCreateModal = false)} onclick={(e) => e.target === e.currentTarget && (showCreateModal = false)} role="dialog" aria-modal="true" aria-label={m.events_create()} >

{m.events_create()}

{ e.preventDefault(); handleCreate(); }} >

<div class="grid grid-cols-2 gap-3">
					<Input
						variant="compact"
						type="date"
						label={m.events_form_start_date()}
						bind:value={newEventStartDate}
					/>
					<Input
						variant="compact"
						type="date"
						label={m.events_form_end_date()}
						bind:value={newEventEndDate}
					/>
				</div>

<div class="flex flex-col gap-2">
					<Input
						variant="compact"
						label={m.events_form_venue()}
						bind:value={newEventVenue}
						placeholder={m.events_form_venue_placeholder()}
					/>
					<Input
						variant="compact"
						bind:value={newEventVenueAddress}
						placeholder={m.events_form_venue_address_placeholder()}
					/>
				</div>

<div class="flex flex-col gap-1.5">
					
					<label class="text-body-sm text-light/60 font-body"
						>{m.events_form_color()}</label
					>
					<div class="flex items-center gap-2">
						{#each presetColors as color}
							<button
								type="button"
								class="w-7 h-7 rounded-full border-2 transition-all {newEventColor ===
								color
									? 'border-white scale-110'
									: 'border-transparent hover:border-light/30'}"
								style="background-color: {color}"
								onclick={() => (newEventColor = color)}
								aria-label={m.events_form_select_color({
									color,
								})}
							></button>
						{/each}
					</div>
				</div>

<div
					class="flex items-center justify-end gap-3 pt-2 border-t border-light/5"
				>
					<button
						type="button"
						class="px-4 py-2 text-body-sm text-light/60 hover:text-white transition-colors"
						onclick={() => {
							showCreateModal = false;
							resetForm();
						}}
					>
						{m.btn_cancel()}
					</button>
					<button
						type="submit"
						disabled={!newEventName.trim() || creating}
						class="px-4 py-2 bg-primary text-background rounded-xl font-body text-body-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
					>
						{creating ? m.events_creating() : m.events_create()}
					</button>
				</div>
			</form>
		</div>
	</div>
{/if}