package templates

import "mal/integrations/jikan"
import ui "mal/web/components"
import "fmt"
import "mal/web/shared/layout"

templ Catalog() {
	@layout.Layout("mal - catalog", true) {
		<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="catalog-content">
			<div class="col-span-full" hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML">
				@ui.LoadingIndicator("Loading catalog")
			</div>
		</div>
	}
}

templ CatalogItems(animes []jikan.Anime, watchlistStatuses map[int]string, nextPage int, hasNext bool) {
	@ui.InfiniteAnimeList(animes, watchlistStatuses, hasNext, string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))), "catalog-content")
}

templ CatalogPlaceholderItems(count int) {
	for i := 0; i < count; i++ {
		<div class="pointer-events-none min-w-0" aria-hidden="true">
			<div class="aspect-2/3 max-h-(--poster-max-height) w-full animate-pulse bg-(--surface-search)"></div>
			<div class="mt-2 h-4 w-4/5 animate-pulse bg-(--surface-search)"></div>
		</div>
	}
}