package customdropdown;

import "cpone/models"

templ MainCustomDropdown(inp models.CustomDropdownv1Prm, listItem templ.Component) {
	<div class="form-control bg-field border-0 h-auto">
		<select
			name={ inp.Name }
			class="form-control bg-field selectpicker"
			data-live-search="true"
			data-size="5"
			id={ inp.ID }
			hx-get={ inp.HxGet }
			hx-target={ inp.HxTarget }
			hx-indicator={ inp.HxIndicator }
			hx-trigger={ inp.HxTrigger }
			hx-include={ inp.HxInclude }
		>
			@listItem
		</select>
		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
			{ inp.ErrorMsg }
		</div>
	</div>
}

templ MainCustomDropdownInput(inp models.CustomDropdownv1Prm, listItem templ.Component) {
	<div class="form-control bg-field border-0 h-auto">
		<select
			name={ inp.Name }
			class="form-control bg-field selectpicker"
			data-live-search="true"
			data-style="bg-field btn-lg rounded-lg btn-custom-selectpicker"
			data-size="5"
			id={ inp.ID }
		>
			@listItem
		</select>
		<div class="invalid-feedback text-danger mt-3 ml-2 mt-5">
			{ inp.ErrorMsg }
		</div>
	</div>
}

templ MainCustomDropdownV1(name string, id string, hxTarget string, hxGet string, hxIndicator string, hxTrigger string, hxInclude string, listItem templ.Component) {
	<div class="form-control bg-field border-0 h-auto">
		<select
			name={ name }
			class="form-control bg-field selectpicker"
			data-live-search="true"
			data-size="5"
			id={ id }
			hx-get={ hxGet }
			hx-target={ hxTarget }
			hx-indicator={ hxIndicator }
			hx-trigger={ hxTrigger }
			hx-include={ hxInclude }
		>
			@listItem
		</select>
	</div>
}

templ CustomDropdownFilter(
	idCmp string,
	hxName string,
	hxInclude string,
	hxGet string,
	hxSwap string,
	hxTarget string,
	hxTrigger string,
	hxBeforeRequest templ.ComponentScript,
	hxAfterRequest templ.ComponentScript,
	listItem templ.Component) {
	<select
		class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
		data-live-search="true"
		data-size="5"
		data-style="btn-field btn-lg rounded-lg"
		data-live-search-placeholder="cari ..."
		id={ idCmp }
		name={ hxName }
		hx-include={ hxInclude }
		hx-get={ hxGet }
		hx-swap={ hxSwap }
		hx-target={ hxTarget }
		hx-trigger={ hxTrigger }
		hx-on::before-request={ hxBeforeRequest }
		hx-on::after-request={ hxAfterRequest }
	>
		@listItem
	</select>
}

templ CustomDropdownForm(
	inp models.CustomDropdownV2Prm) {
	<div class="form-group">
		<label class="text-black" style="font-family: Poppins; font-weight: 600;">{ inp.Label } </label>
		<select
			if inp.ErrorMsg =="" {
				class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker"
			} else {
				class="form-control form-control-lg bg-field btn-lg rounded-lg selectpicker is-invalid"
			}
			data-live-search="true"
			data-size="5"
			title={ inp.Placeholder }
			data-style="btn-field btn-lg rounded-lg"
			data-live-search-placeholder="cari ..."
			name={ inp.Name }
			id={ inp.ID }
		>
			@inp.ListItem
		</select>
		<div class="invalid-feedback text-danger mt-3 ml-2">
			{ inp.ErrorMsg }
		</div>
	</div>
}
