package templates

import "bookhoard/internal/handlers"

templ BooksGrid(books []handlers.BookInfo, limit int, offset int, count int, currentLibraryID string) {
	<div id="books-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
		if len(books) > 0 {
			for _, book := range books {
				@BookCard(book)
			}
		} else {
			<!-- Empty state -->
			<div class="col-span-full text-center py-12" style="color: var(--text-secondary);">
				<p class="text-lg mb-2">📚 No books found</p>
				<p class="text-sm">Try adjusting your filters or add some books to your library.</p>
			</div>
		}
	</div>
	<!-- Pagination -->
	<div id="pagination" class="mt-6 flex justify-center gap-2">
		if count > 0 {
			<button
				type="button"
				class="px-4 py-2 rounded-lg border disabled:opacity-50"
				style="border-color: var(--border); color: var(--text-primary);"
				hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset - limit }"
				hx-target="#books-grid"
				hx-include="#filter-form"
				disabled?={ offset <= 0 }
			>
				← Previous
			</button>
			<span class="px-4 py-2" style="color: var(--text-secondary);">
				Page { offset / limit + 1 }
			</span>
			<button
				class="px-4 py-2 rounded-lg border disabled:opacity-50"
				style="border-color: var(--border); color: var(--text-primary);"
				hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset + limit }"
				hx-target="#books-grid"
				hx-include="#filter-form"
				disabled?={ offset+limit >= count }
			>
				Next →
			</button>
		}
	</div>
}