package customtextfieldsearch

templ MainCustomTextFieldSearch(
	inpName,
	inpPlaceHolder,
	inpType,
	hxPost,
	hxTrigger,
	hxTarget,
	hxIndicator string) {
	<input
		class="form-control bg-field border-0"
		type={ inpType }
		name={ inpName }
		id={ inpName }
		placeholder={ inpPlaceHolder }
		hx-post={ hxPost }
		hx-trigger={ hxTrigger }
		hx-target={ hxTarget }
		hx-indicator={ hxIndicator }
		autocomplete="off"
	/>
}

templ MainCustomTextFieldSearchV1(
	inpId,
	inpName,
	inpPlaceHolder,
	inpType,
	hxGet,
	hxTrigger,
	hxTarget,
	hxIndicator,
	value,
	hxExt string) {
	<input
		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
		type={ inpType }
		name={ inpName }
		id={ inpId }
		placeholder={ inpPlaceHolder }
		hx-get={ hxGet }
		hx-trigger={ hxTrigger }
		hx-target={ hxTarget }
		hx-indicator={ hxIndicator }
		value={ value }
		hx-ext={ hxExt }
		autocomplete="off"
	/>
}

templ MainCustomTextFieldSearchV2(
	inpId,
	inpName,
	inpPlaceHolder,
	inpType,
	hxGet,
	hxTrigger,
	hxTarget,
	hxIndicator,
	value,
	hxSwap string,
	hxInclude string) {
	<input
		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
		type={ inpType }
		name={ inpName }
		id={ inpId }
		placeholder={ inpPlaceHolder }
		hx-get={ hxGet }
		hx-trigger={ hxTrigger }
		hx-target={ hxTarget }
		hx-indicator={ hxIndicator }
		value={ value }
		hx-include={ hxInclude }
		hx-swap={ hxSwap }
		autocomplete="off"
	/>
	<script>
    document.body.addEventListener('htmx:targetError', function(event) {
        console.error('Error updating target element:', event.detail);
        alert('There was an error updating the target element.');
    });
</script>
}

templ MainCustomTextFieldSearchV3(
	inpId,
	inpName,
	inpPlaceHolder,
	inpType,
	hxGet,
	hxTrigger,
	hxTarget,
	hxIndicator,
	value,
	hxSwap string,
	hxInclude string,
	hxBeforeRequest templ.ComponentScript,
	hxAfterRequest templ.ComponentScript) {
	<input
		class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
		type={ inpType }
		name={ inpName }
		id={ inpId }
		placeholder={ inpPlaceHolder }
		hx-get={ hxGet }
		hx-trigger={ hxTrigger }
		hx-target={ hxTarget }
		hx-indicator={ hxIndicator }
		value={ value }
		hx-include={ hxInclude }
		hx-swap={ hxSwap }
		hx-on::before-request={ hxBeforeRequest }
		hx-on::after-request={ hxAfterRequest }
		autocomplete="off"
	/>
	<script>
    document.body.addEventListener('htmx:targetError', function(event) {
        console.error('Error updating target element:', event.detail);
        alert('There was an error updating the target element.');
    });
</script>
}
