package templates

templ CollectionModal(collection CollectionData) {
	<div x-data="collections" class="fixed inset-0 z-[65] flex items-center justify-center p-4" style="background-color: var(--surface-overlay);">
		<div class="card p-6 w-full max-w-md" style="box-shadow: var(--shadow-pop);">
			<div class="flex justify-between items-center mb-6">
				<div class="flex items-center gap-3">
					<span class="grid place-items-center h-10 w-10 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
						@Icon("folder", "h-5 w-5")
					</span>
					if collection.ID != "" {
						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Edit Collection</h2>
					} else {
						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Create Collection</h2>
					}
				</div>
				<button type="button" @click="closeCollectionModal($el)" class="icon-btn" aria-label="Close">
					@Icon("close", "h-5 w-5")
				</button>
			</div>
			if collection.ID != "" {
				<form
					hx-put={ "/api/collections/" + collection.ID }
					hx-redirect="/collections"
				>
					<input type="hidden" name="id" value={ collection.ID }/>
					<div class="mb-4">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Name</label>
						<input
							type="text"
							name="name"
							value={ collection.Name }
							required
							class="input"
							placeholder="My Reading List"
						/>
					</div>
					<div class="mb-4">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Description</label>
						<textarea
							name="description"
							class="input"
							placeholder="Optional description"
							rows="3"
						>{ collection.Description }</textarea>
					</div>
					<div class="mb-4">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Icon</label>
						<input
							type="text"
							id="icon-search"
							class="input mb-2"
							placeholder="Search or type emoji..."
							maxlength="4"
						@input="filterIcons($event.target.value)"
						@focus="showAllIcons()"
						/>
						<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
						<div
							id="icon-grid"
							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border"
							style="background-color: var(--bg-primary); border-color: var(--border);"
						></div>
					</div>
					<div class="mb-6">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Color</label>
						<div class="flex gap-2">
							<button type="button" @click="selectColor('blue')" data-color="blue" class="w-8 h-8 rounded-full color-option bg-blue-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-blue-400" aria-label="Blue"></button>
							<button type="button" @click="selectColor('red')" data-color="red" class="w-8 h-8 rounded-full color-option bg-red-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-red-400" aria-label="Red"></button>
							<button type="button" @click="selectColor('yellow')" data-color="yellow" class="w-8 h-8 rounded-full color-option bg-yellow-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-yellow-400" aria-label="Yellow"></button>
							<button type="button" @click="selectColor('green')" data-color="green" class="w-8 h-8 rounded-full color-option bg-green-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-green-400" aria-label="Green"></button>
							<button type="button" @click="selectColor('purple')" data-color="purple" class="w-8 h-8 rounded-full color-option bg-purple-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-purple-400" aria-label="Purple"></button>
						</div>
						<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
						<div class="mb-4 space-y-2">
							<label class="flex items-center gap-2 text-sm" style="color: var(--text-primary);">
								<input type="hidden" name="hide_finished" value="false"/>
								<input type="checkbox" name="hide_finished" value="true" checked?={ collection.HideFinished } class="h-4 w-4 accent-current"/>
								<span>Hide finished books (reading-queue mode)</span>
							</label>
							<label class="flex items-center gap-2 text-sm" style="color: var(--text-primary);">
								<input type="hidden" name="show_up_next" value="false"/>
								<input type="checkbox" name="show_up_next" value="true" checked?={ collection.ShowUpNext } class="h-4 w-4 accent-current"/>
								<span>Show Up Next strip</span>
							</label>
						</div>
					</div>
					<div class="flex justify-end space-x-3">
						<button type="button" @click="closeCollectionModal($el)" class="btn btn-secondary">Cancel</button>
						<button type="submit" class="btn btn-primary">Update Collection</button>
					</div>
				</form>
			} else {
				<form
					hx-post="/api/collections"
					hx-redirect="/collections"
				>
					<div class="mb-4">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Type</label>
						<div class="grid grid-cols-2 gap-2">
							<label class="relative cursor-pointer">
								<input type="radio" name="collection_type" value="static" checked @change="setCollectionType($event.target.value)" class="peer sr-only"/>
								<div class="p-3 rounded-lg border text-center peer-checked:border-blue-500" style="background-color: var(--bg-primary); border-color: var(--border);">
									<span class="font-semibold text-sm" style="color: var(--text-primary)">Static</span>
									<p class="text-xs mt-1" style="color: var(--text-secondary)">Pick items by hand</p>
								</div>
							</label>
							<label class="relative cursor-pointer">
								<input type="radio" name="collection_type" value="smart" @change="setCollectionType($event.target.value)" class="peer sr-only"/>
								<div class="p-3 rounded-lg border text-center peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-400" style="background-color: var(--bg-primary); border-color: var(--border);">
									<span class="font-semibold text-sm" style="color: var(--text-primary)">⚡ Smart</span>
									<p class="text-xs mt-1" style="color: var(--text-secondary)">Match by rules — always live</p>
								</div>
							</label>
						</div>
					</div>
					<div class="mb-4" x-show="collectionType === 'smart'" x-cloak>
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Rules scope</label>
						<div class="grid grid-cols-2 gap-2">
							<button
								type="button"
								@click="setSmartScope('books')"
								:class="smartScope === 'books' ? 'btn btn-secondary' : 'btn btn-ghost'"
							>
								📚 Books
							</button>
							<button
								type="button"
								@click="setSmartScope('episodes')"
								:class="smartScope === 'episodes' ? 'btn btn-secondary' : 'btn btn-ghost'"
							>
								🎧 Podcast episodes
							</button>
						</div>
						<p class="text-xs mt-2" style="color: var(--text-secondary)">
							Episodes collections match your podcast subscriptions' episodes (feed, downloaded, played, published date) and play as a sequence.
						</p>
						<input type="hidden" name="filter_tree" id="collection-tree-seed" value=""/>
					</div>
					<div class="mb-4">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Name</label>
						<input
							type="text"
							name="name"
							required
							class="input"
							placeholder="My Reading List"
						/>
					</div>
					<div class="mb-4">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Description</label>
						<textarea
							name="description"
							class="input"
							placeholder="Optional description"
							rows="3"
						></textarea>
					</div>
					<div class="mb-4">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Icon</label>
						<input
							type="text"
							id="icon-search"
							class="input mb-2"
							placeholder="Search or type emoji..."
							maxlength="4"
						@input="filterIcons($event.target.value)"
						@focus="showAllIcons()"
						/>
						<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
						<div
							id="icon-grid"
							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border"
							style="background-color: var(--bg-primary); border-color: var(--border);"
						></div>
					</div>
					<div class="mb-6">
						<label class="block text-xs font-semibold uppercase tracking-wide mb-2" style="color: var(--text-secondary)">Color</label>
						<div class="flex gap-2">
							<button type="button" @click="selectColor('blue')" data-color="blue" class="w-8 h-8 rounded-full color-option bg-blue-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-blue-400" aria-label="Blue"></button>
							<button type="button" @click="selectColor('red')" data-color="red" class="w-8 h-8 rounded-full color-option bg-red-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-red-400" aria-label="Red"></button>
							<button type="button" @click="selectColor('yellow')" data-color="yellow" class="w-8 h-8 rounded-full color-option bg-yellow-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-yellow-400" aria-label="Yellow"></button>
							<button type="button" @click="selectColor('green')" data-color="green" class="w-8 h-8 rounded-full color-option bg-green-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-green-400" aria-label="Green"></button>
							<button type="button" @click="selectColor('purple')" data-color="purple" class="w-8 h-8 rounded-full color-option bg-purple-500 hover:ring-2 hover:ring-offset-2 hover:ring-offset-transparent hover:ring-purple-400" aria-label="Purple"></button>
						</div>
						<input type="hidden" name="color" id="collection-color" value="blue"/>
					</div>
					<div class="flex justify-end space-x-3">
						<button type="button" @click="closeCollectionModal($el)" class="btn btn-secondary">Cancel</button>
						<button type="submit" class="btn btn-primary">Create Collection</button>
					</div>
				</form>
			}
		</div>
	</div>
}