package adddevice

import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/components"

templ View(c *views.Context) {
	@components.Doctype() {
		@components.Head(c, components.HeadTitle("Device - Add"))
		@components.Body(c) {
			@Content(c)
		}
	}
}

templ Content(c *views.Context) {
	<main class="prose min-w-full">
		@components.Container() {
			<h1>Add Device</h1>
			<div class="divider"></div>
			<form
				method="post"
				hx-post="/htmx/devices/add"
				action="/htmx/devices/add"
				class="grid sm:grid-cols-2 gap-4"
				hx-target={ components.NotificationContainerID }
				hx-target-error={ components.NotificationContainerID }
				hx-swap="afterbegin"
			>
				@NameInput(NameInputData{})
				@SlugInput(SlugInputData{})
				@ResolutionXInput(ResolutionData{})
				@ResolutionYInput(ResolutionData{})
				<div class="divider my-auto sm:col-span-2"><h3 class="m-0 p-0">Filter</h3></div>
				@AspectRatioToleranceInput(AspectRatioToleranceData{Value: 0.2})
				@NSFWCheckbox(NSFWCheckboxData{Checked: true})
				@WindowsWallpaperCheckbox(WindowsWallpaperCheckboxData{})
				@MinImageResolutionXInput(ResolutionData{})
				@MinImageResolutionYInput(ResolutionData{})
				@MaxImageResolutionXInput(ResolutionData{})
				@MaxImageResolutionYInput(ResolutionData{})
				<button type="submit" class="btn btn-primary sm:col-span-2">Add</button>
			</form>
		}
	</main>
	@components.NotificationContainer()
}