package templates

templ CollectionModal(collection CollectionData) {
	<div x-data="collections" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
		<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
			<div class="flex justify-between items-center mb-6">
				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>
				}
				<button type="button" @click="closeCollectionModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</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-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
						<input
							type="text"
							name="name"
							value={ collection.Name }
							required
							class="w-full px-4 py-2 border rounded-lg"
							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
							placeholder="My Reading List"
						/>
					</div>
					<div class="mb-4">
						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
						<textarea
							name="description"
							class="w-full px-4 py-2 border rounded-lg"
							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
							placeholder="Optional description"
							rows="3"
						>{ collection.Description }</textarea>
					</div>
					<div class="mb-4">
						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon</label>
						<!-- Search/Text Input -->
						<input
							type="text"
							id="icon-search"
							class="w-full px-4 py-2 border rounded-lg mb-2"
							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
							placeholder="🔍 Search or type emoji..."
							maxlength="4"
							oninput="filterIcons(this.value)"
							onfocus="showAllIcons()"
						/>
						<!-- Hidden input for form submission -->
						<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
						<!-- Emoji Grid -->
						<div
							id="icon-grid"
							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg"
							style="background-color: var(--bg-primary); border-color: var(--border);"
						>
							<!-- Populated dynamically by JavaScript -->
						</div>
					</div>
					<div class="mb-6">
						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
						<div class="flex gap-2">
							<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
							<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
							<button type="button" @click="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
							<button type="button" @click="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
							<button type="button" @click="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></button>
						</div>
						<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
					</div>
					<div class="flex justify-end space-x-3">
						<button type="button" @click="closeCollectionModal()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
						<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Update Collection</button>
					</div>
				</form>
			} else {
				<form
					hx-post="/api/collections"
					hx-redirect="/collections"
				>
					<div class="mb-4">
						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
						<input
							type="text"
							name="name"
							required
							class="w-full px-4 py-2 border rounded-lg"
							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
							placeholder="My Reading List"
						/>
					</div>
					<div class="mb-4">
						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
						<textarea
							name="description"
							class="w-full px-4 py-2 border rounded-lg"
							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
							placeholder="Optional description"
							rows="3"
						></textarea>
					</div>
					<div class="mb-4">
						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon</label>
						<!-- Search/Text Input -->
						<input
							type="text"
							id="icon-search"
							class="w-full px-4 py-2 border rounded-lg mb-2"
							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
							placeholder="🔍 Search or type emoji..."
							maxlength="4"
							oninput="filterIcons(this.value)"
							onfocus="showAllIcons()"
						/>
						<!-- Hidden input for form submission -->
						<input type="hidden" name="icon" id="collection-icon" value={ collection.Icon }/>
						<!-- Emoji Grid -->
						<div
							id="icon-grid"
							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg"
							style="background-color: var(--bg-primary); border-color: var(--border);"
						>
							<!-- Populated dynamically by JavaScript -->
						</div>
					</div>
					<div class="mb-6">
						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
						<div class="flex gap-2">
							<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
							<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
							<button type="button" @click="selectColor('yellow')" class="w-8 h-8 rounded-full color-option bg-yellow-500"></button>
							<button type="button" @click="selectColor('green')" class="w-8 h-8 rounded-full color-option bg-green-500"></button>
							<button type="button" @click="selectColor('purple')" class="w-8 h-8 rounded-full color-option bg-purple-500"></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()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
						<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Create Collection</button>
					</div>
				</form>
			}
		</div>
	</div>
}