@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.QueryPublisher.QueryResultViewModel>
@using Dynamicweb.Core.Encoders
@using Dynamicweb
@using Dynamicweb.Frontend

@{
	string? searchTerm = Dynamicweb.Context.Current?.Request.QueryString.Get("postq") ?? null;
	string uniqueId = Pageview?.CurrentParagraph?.ID != null ? Pageview.CurrentParagraph.ID.ToString() : Guid.NewGuid().ToString("N");
}

<div class="type-ahead-dropdown">
	<div class="suggest-form position-relative">
		<div class="hstack">
			<label for="postSearch_@uniqueId" class="visually-hidden">@Translate("Search")</label>
			<span class="position-absolute icon-2 reset-search px-3">
				@ReadFile("/Files/Images/Icons/magnifying-glass.svg")
			</span>
			<input id="postSearch_@uniqueId"
					type="search"
					class="form-control form-control-sm rounded-pill type-ahead-field bg-white py-2 ps-5 pe-5"
					data-dw-colorscheme="light"
					placeholder="@Translate("Search")"
					aria-label="@Translate("Search")"
					aria-describedby="postSearch_@uniqueId"
					name="postq"
					value="@searchTerm">

			<button type="button"
					class="btn position-absolute end-0 icon-2 reset-search"
					aria-label="@Translate("Clear search field")"
					style="opacity: 0; visibility: hidden;"
					onclick="var i=this.closest('.suggest-form').querySelector('input[name=postq]');i.value='';i.dispatchEvent(new Event('change',{bubbles:true}))">
				@ReadFile("/Files/Images/Icons/xmark.svg")
			</button>
		</div>
	</div>
</div>