@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="nav-wrapper">
	<button type="button" role="button" class="p-2 nav-link d-inline-flex align-items-center gap-2 text-nowrap text-decoration-underline-hover" data-bs-toggle="modal" data-bs-target="#searchModal_@paragraphId">
		<span class="icon-3" aria-hidden="true">
			@ReadFile(iconPath + "magnifying-glass.svg")
		</span>
		<span class="visually-hidden">@Translate("Open search modal")</span>
	</button>
	<div class="modal fade" id="searchModal_@paragraphId" tabindex="-1" data-bs-backdrop="false" data-dw-colorscheme="@Model.ColorScheme?.Id">
		<div class="modal-dialog modal-fullscreen">
			<div class="modal-content">
				<div class="modal-header justify-content-between">
					<h5 class="modal-title m-0">@Translate("Search")</h5>
					<button type="button" data-bs-dismiss="modal" class="bg-transparent border-0 p-0 text-reset">
						<span class="icon-3" aria-hidden="true">
							@ReadFile(iconPath + "xmark.svg")
						</span>
						<span class="visually-hidden">@Translate("Close search modal")</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="js-async-fetch-placeholder" style="width: 100%; min-width: 260px;">
						<div class="dropdown js-type-ahead-dropdown type-ahead-dropdown">
							<form method="post"
									action="@shopPage"
									data-search-results-page="@searchResultsPageId"
									data-product-details-page="@shopPage"
									data-product-list-page="@shopPage"
									data-search-layout="icon"
									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="icon">
								<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"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
