package templates

import "mal/internal/jikan"
import "mal/internal/shared/ui"
import "fmt"

templ Discover() {
	@Layout("mal - discover") {
		<div class="discover-container">
			<div class="discover-header">
				<h1>Discover</h1>
				<p class="discover-subtitle">Browse what's airing now and what is coming soon.</p>
			</div>
			<div class="tabs discover-tabs" data-tab-group="discover">
				<button
					class="tab active"
					type="button"
					hx-get="/api/discover/airing?page=1"
					hx-target="#discover-content"
					hx-trigger="click"
					data-tab-trigger
				>
					airing now
				</button>
				<button
					class="tab"
					type="button"
					hx-get="/api/discover/upcoming?page=1"
					hx-target="#discover-content"
					hx-trigger="click"
					data-tab-trigger
				>
					upcoming
				</button>
			</div>
			<div class="catalog-grid" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
				<div class="grid-full-width">
					@ui.LoadingIndicator("Loading discover")
				</div>
			</div>
		</div>
	}
}

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