package templates

templ LibrarySwitcher(libData []LibraryData, currentLibraryID string, actions ...templ.Component) {
	<div
		class="app-subbar backdrop-blur border-b"
		style="background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent); border-color: color-mix(in srgb, var(--text-primary) 6%, transparent);"
	>
		<div class="w-full px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4">
			<div class="flex items-center gap-3">
				<label class="text-sm font-medium" style="color: var(--text-secondary)">Library</label>
				<select
					id="library-select"
					name="library_id"
					class="input w-auto py-1.5 pr-8 cursor-pointer"
				>
					<option value="">All Libraries ({ TotalMediaCount(libData) })</option>
					for _, lib := range libData {
						if lib.ID == currentLibraryID {
							<option value={ lib.ID } selected>{ lib.Name } ({ lib.MediaCount })</option>
						} else {
							<option value={ lib.ID }>{ lib.Name } ({ lib.MediaCount })</option>
						}
					}
				</select>
			</div>
			if len(actions) > 0 {
				<div class="flex items-center gap-2">
					for _, action := range actions {
						@action
					}
				</div>
			}
		</div>
		<div
			id="loading-spinner"
			class="hidden fixed inset-0 bg-opacity-50 flex items-center justify-center z-50"
			style="background-color: var(--bg-primary);"
		>
			<div class="animate-spin rounded-full h-12 w-12 border-b-2" style="border-color: var(--accent);"></div>
		</div>
	</div>
}

templ DashboardActions() {
	<button
		data-action="open-dashboard-settings"
		class="icon-btn"
		title="Customize Dashboard"
	>
		@Icon("grid", "h-5 w-5")
	</button>
	<button
		data-action="reload-page"
		class="icon-btn"
		title="Refresh"
	>
		@Icon("refresh", "h-5 w-5")
	</button>
}