package page

import "projectreshoot/view/layout"

templ Movies() {
	@layout.Global() {
		<div class="max-w-4xl mx-auto md:mt-0 mt-2 px-2 md:px-0">
			<form hx-post="/search-movies" hx-target="#search-movies-results">
				<div
					class="max-w-100 flex items-center space-x-2 mb-2"
				>
					<input
						id="search"
						name="search"
						type="text"
						placeholder="Search movies..."
						class="flex-grow p-2 border rounded-lg  
                        bg-mantle border-surface2 shadow-sm
                        focus:outline-none focus:ring-2 focus:ring-blue"
					/>
					<button
						type="submit"
						class="py-2 px-4 bg-green text-mantle rounded-lg transition
                        hover:cursor-pointer hover:bg-green/75"
					>Search</button>
				</div>
				<div id="search-movies-results" class="space-y-4"></div>
			</form>
		</div>
	}
}