package details

import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/components"
import "fmt"
import "github.com/tigorlazuardi/redmage/models"
import "strconv"

templ View(c *views.Context, data Data) {
	@components.Doctype() {
		if data.Device == nil {
			@components.Head(c, components.HeadTitle("Redmage - Device Not Found"))
		} else {
			@components.Head(c, components.HeadTitle(fmt.Sprintf("Redmage - %s", data.Device.Name)))
		}
		@components.Body(c) {
			@Content(c, data)
		}
	}
}

templ Content(c *views.Context, data Data) {
	<main class="prose min-w-full">
		@components.Container() {
			if data.Error != "" {
				@components.ErrorToast(data.Error)
			} else {
				<div class="flex justify-between items-center">
					<h1 class="my-auto">{ data.Device.Name }</h1>
					<a
						href={ templ.SafeURL(fmt.Sprintf("/devices/edit/%s", data.Device.Slug)) }
						class="btn btn-primary no-underline sm:w-24"
					>Edit</a>
				</div>
				<div class="divider"></div>
				@filter(c, data)
				<h2>{ strconv.FormatInt(data.TotalImages, 10) } Images</h2>
				if data.TotalImages > 0 {
					<div class="flex justify-center mt-4">
						@components.Pagination(c, components.PaginationData{
							BaseURL: "/devices/details/" + data.Device.Slug,
							Limit:   data.Params.Limit,
							Offset:  data.Params.Offset,
							Total:   data.TotalImages,
						})
					</div>
					<p class="text-center my-4">
						Showing from 
						{ strconv.FormatInt(data.Params.Offset + 1, 10) }
						to 
						{ strconv.FormatInt(min(data.Params.Limit+data.Params.Offset, data.TotalImages), 10) }
					</p>
				}
				for _, group := range data.splitImages() {
					<h2>{ group.Subreddit }</h2>
					@imageList(group.Images)
				}
				<div class="flex justify-center mt-4">
					@components.Pagination(c, components.PaginationData{
						BaseURL: "/devices/details/" + data.Device.Slug,
						Limit:   data.Params.Limit,
						Offset:  data.Params.Offset,
						Total:   data.TotalImages,
					})
				</div>
			}
		}
	</main>
}

templ imageList(images models.ImageSlice) {
	<div class="overflow-x-auto flex gap-4 p-6 shadow-inner bg-base-300 rounded-2xl w-[85vw] md:w-full scrollbar-track-base-100 scrollbar-thumb-primary scrollbar-thin hover:scrollbar-thumb-base-300">
		for _, data := range images {
			@components.ImageCard(data, 0)
		}
	</div>
}