Title

Description

</div>

<div class="md:col-span-2">
			<Label for="location" class="mb-2">Location</Label>
			<Input
				id="location"
				type="text"
				placeholder="Location (optional)"
				bind:value={location}
				disabled={loading}
			/>
		</div>

<div>
			<Label for="start-date" class="mb-2">Start Date</Label>
			<Input id="start-date" type="date" bind:value={startDate} required disabled={loading} />
		</div>
		<div>
			<Label for="start-time" class="mb-2">Start Time</Label>
			<Input id="start-time" type="time" bind:value={startTime} required disabled={loading} />
		</div>
		<div>
			<Label for="end-date" class="mb-2">End Date</Label>
			<Input id="end-date" type="date" bind:value={endDate} required disabled={loading} />
		</div>
		<div>
			<Label for="end-time" class="mb-2">End Time</Label>
			<Input id="end-time" type="time" bind:value={endTime} required disabled={loading} />
		</div>

<div class="md:col-span-2">
			<Label class="mb-2">Select Team Members</Label>
			{#if $profiles.fetching}
				<div class="text-sm text-gray-500">Loading team profiles...</div>
			{:else if ($profiles.data?.teamProfiles?.length ?? 0) === 0}
				<div class="text-sm text-gray-500">No team profiles found.</div>
			{:else}
				<div class="grid gap-2 md:grid-cols-2">
					{#each ($profiles.data?.teamProfiles ?? []).filter((p) => String(p.status) === 'ACTIVE') as profile (profile.id)}
						<label class="flex items-center gap-2">
							<input
								type="checkbox"
								checked={selectedTeamMembers.includes(String(profile.id))}
								onchange={(e) =>
									handleTeamMemberChange(String(profile.id), e.currentTarget.checked)}
								disabled={loading}
							/>
							<span
								>{profile.fullName ||
									`${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()}</span
							>
						</label>
					{/each}
				</div>
			{/if}
		</div>

<div class="space-y-4 md:col-span-2">
			<div class="font-medium">Attendees</div>

{#if attendees.length === 0}
				<div class="text-sm text-gray-500 italic dark:text-gray-400">No attendees added</div>
			{:else}
				{#each attendees as attendee, i (attendee.id)}
					<div
						class="grid items-end gap-2 rounded border border-gray-200 bg-gray-50 p-3 md:grid-cols-3 dark:border-gray-700 dark:bg-gray-800 {attendee.isFromTeam
							? 'border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/30'
							: ''}"
					>
						<div>
							<Label>Email</Label>
							{#if attendee.isFromTeam}
								<div
									class="rounded bg-gray-100 p-2 text-sm text-gray-900 dark:bg-gray-700 dark:text-gray-100"
								>
									{attendee.email || 'Loading...'}
								</div>
							{:else}
								<Input bind:value={attendees[i].email} placeholder="name@example.com" />
							{/if}
						</div>
						<div>
							<Label>Display Name {attendee.isFromTeam ? '' : '(optional)'}</Label>
							{#if attendee.isFromTeam}
								<div
									class="rounded bg-gray-100 p-2 text-sm text-gray-900 dark:bg-gray-700 dark:text-gray-100"
								>
									{attendee.displayName}
								</div>
							{:else}
								<Input bind:value={attendees[i].displayName} placeholder="Jane Doe" />
							{/if}
						</div>
						<div class="flex items-center gap-2">
							{#if attendee.isFromTeam}
								<span class="text-xs font-medium text-blue-700 dark:text-blue-400">Team Member</span
								>
							{:else}
								<Button type="button" color="light" onclick={() => removeAttendee(i)}>
									Remove
								</Button>
							{/if}
						</div>
					</div>
				{/each}
			{/if}

<Button type="button" color="light" onclick={addManualAttendee}>Add Manual Attendee</Button>
		</div>
	</div>

<div class="flex items-center gap-3">
		<Button color="primary" type="submit" disabled={loading}>
			{#if loading}
				<Spinner size="4" class="mr-2" />
				Creating...
			{:else}
				Create Event
			{/if}
		</Button>
		<Button color="light" href="/calendar">Cancel</Button>
	</div>
</form>