filter.templ

package components

import "github.com/Piszmog/pathwise/types"
import "strconv"

templ filterForm(archived bool) {
	<script type="text/javascript">
		function clearFilter() {
			document.getElementById('company').value = '';
			document.getElementById('status-select').value = '';
		}
	</script>
	<form
		id="filter-form"
		class="ml-3 mr-3 mt-3 flex items-center space-x-2"
		hx-get="/jobs"
		hx-target="#jobs"
		hx-swap="outerHTML"
	>
		<input
			type="hidden"
			name="archived"
			value={ strconv.FormatBool(archived) }
		/>
		<div class="w-full">
			<label for="company" class="block text-sm font-medium leading-6 text-gray-900">Company</label>
			<div class="mt-2">
				<input
					type="text"
					name="company"
					id="company"
					class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6"
					placeholder="Awesome Company"
				/>
			</div>
		</div>
		@inputSelect(types.SelectOpts{
			Name:        "status",
			Label:       "Status",
			Placeholder: "All",
			Options:     types.JobApplicationStatusSelectOptions,
		})
		<button
			type="submit"
			class="rounded-md bg-blue-600 mt-8 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
		>
			Filter
		</button>
		<button
			onclick="clearFilter()"
			type="submit"
			class="rounded-md mt-8 px-3 py-2 text-sm font-semibold bg-white text-gray-900 shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 ring-1 ring-insert ring-gray-300"
		>
			Clear
		</button>
	</form>
}