@using Dynamicweb.Frontend
@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>

@{
	string iconPath = "/Files/Images/Icons/";

	string shopPage = Dynamicweb.Frontend.SearchEngineFriendlyURLs.GetFriendlyUrl($"Default.aspx?ID={GetPageIdByNavigationTag("Shop")}");
	string paragraphId = Model.ID.ToString();
	string searchTerm = string.Empty;
	if (!string.IsNullOrEmpty(Dynamicweb.Context.Current.Request["q"]))
	{
		searchTerm = System.Net.WebUtility.HtmlEncode(Dynamicweb.Context.Current.Request["q"]);
	}
	string groupIdQueryParameter = string.Empty;
	if (!string.IsNullOrEmpty(Dynamicweb.Context.Current.Request["GroupID"]))
	{
		groupIdQueryParameter = "&GroupID=" + System.Net.WebUtility.HtmlEncode(Dynamicweb.Context.Current.Request["GroupID"]).Trim();
	}

	int searchResultsPageId = 0;
	if (Model.Item.TryGetLink("SearchResultsPage", out LinkViewModel searchResultsPage))
	{
		searchResultsPageId = searchResultsPage.PageId;
	}
}

<div class="d-flex align-items-center h-100 my-auto search-modal">
	<div class="js-async-fetch-placeholder" style="width: 100%; min-width: 260px;">
		<div class="dropdown js-type-ahead-dropdown type-ahead-dropdown">
			<form method="get"
					action="@shopPage"
					data-search-results-page="@searchResultsPageId"
					data-product-details-page="@shopPage"
					data-product-list-page="@shopPage"
					data-search-layout="field"
					class="js-suggest-form suggest-form">

				<input type="hidden" class="js-type-ahead-parameter">
				<input type="hidden" name="redirect" value="false">
				<input type="hidden" name="SearchLayout" value="field">
				<label for="searchField_@paragraphId" class="visually-hidden">@Translate("Search here")</label>
				<span class="position-absolute top-0 icon-2 px-3 d-flex align-items-center h-100 search-icon">
					@ReadFile(iconPath + "magnifying-glass.svg")
				</span>
				<input id="searchField_@paragraphId"
						class="form-control js-type-ahead-field type-ahead-field py-2 ps-5 pe-3"
						type="search"
						placeholder="@Translate("Search here")"
						autocomplete="off"
						maxlength="255"
						name="q"
						value="@searchTerm"
						data-original="@searchTerm"
						onfocus="swift.Typeahead.init()">
				<button type="button"
						onclick="var f = document.getElementById('searchField_@paragraphId'); f.value = ''; f.focus();"
						class="btn h-100 icon-2 reset-search"
						aria-label="@Translate("Clear search")"
						style="opacity: 0; position: absolute; top: 0; right: 0; visibility: hidden;">
					@ReadFile(iconPath + "xmark.svg")
				</button>
			</form>
			<ul class="dropdown-menu w-100 js-type-ahead-menu type-ahead-menu" data-dw-colorscheme="light"></ul>
		</div>
	</div>
</div>
