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

<div>
	@if (Model.Item.TryGetGeolocation("DefaultMapCenter", out var defaultMapCenter)) {
		if (Pageview.AreaSettings.TryGetString("Google_APIKey", out string apiKey)) {
			var locationList = Model.Item.GetUserGroup("UserGroup")?.GetUsers(0, 1000);
			string jsonLocationList = System.Net.WebUtility.HtmlEncode(
				System.Text.Json.JsonSerializer.Serialize(locationList)
			);

			string regionCode = "DK";
			if (Model.Item.TryGetString("RegionCode", out string region))
			{
				regionCode = region;
			}

			<swift-locations-map
				class="grid position-relative"
				api-key="@apiKey"
				locations="@jsonLocationList"
				default-lat="@defaultMapCenter.Latitude"
				default-lng="@defaultMapCenter.Longitude"
				initial-zoom-level="@Model.Item.GetInt32("InitialZoomLevel")"
				region-code="@regionCode"
				map-style='@ReadFile(Model?.Item?.GetString("MapStyle"))'
				no-locations-found-label="@Translate("No options available in the selected area")"
				map-icon-url="/Files/Images/Icons/location-dot.svg">

				<div class="g-col-12 g-col-lg-8 h-100">
					@if (Model.Item.TryGetString("Title", out string title))
					{
						@title
					}
				</div>

				<div class="g-col-12 g-col-lg-4">
					<form data-swift-locationsearch>
						<div class="hstack position-relative">
							<span class="position-absolute icon-2 px-3">
								<span class="htmx-indicator spinner-border spinner-border-sm" aria-hidden="true"></span>
								<span class="icon-2" data-swift-indicator-origin>@ReadFile("/Files/Images/Icons/magnifying-glass.svg")</span>
							</span>
							<input type="text" class="form-control rounded-pill bg-body py-2 ps-5 pe-5" oninput="this.nextElementSibling.hidden = !this.value.trim()" name="FilterText" placeholder="@Translate("Enter city, state or zip")">
							<button type="button"
									onclick="var f = this.closest('form').querySelector('input'); f.value = ''; f.focus(); f.closest('form').submit();"
									class="btn position-absolute end-0 icon-2 reset-search"
									hidden
									aria-label="@Translate("Clear search field")">
								@ReadFile("/Files/Images/Icons/xmark.svg")
							</button>
						</div>
					</form>
				</div>

				<div class="g-col-12">
					<div class="map" data-swift-locations-map></div>
				</div>
			</swift-locations-map>

			<template data-swift-template="info-window">
				<div>
					<h6 class="mb-0">@Translate("Address")</h6>
					<div class="fs-7" data-swift-location="Address"></div>
					<div class="fs-7">
						<span data-swift-location="Zip"></span>
						<span data-swift-location="City"></span>
					</div>
					<div class="mt-3">
						<a href="#" class="hstack gap-2" target="_blank" rel="noopener noreferrer" data-swift-location="DirectionsUrl" title="@Translate("Get directions")" aria-label="@Translate("Get directions")">
							<span class="icon-1">@ReadFile("/Files/Images/Icons/arrow-turn-right.svg")</span>
							<span>@Translate("Directions")</span>
						</a>
					</div>
				</div>
			</template>
		} 
		else 
		{
			<div class="alert alert-info" role="alert">
				@Translate("Google maps API key is missing")
			</div>
		}
	} else {
		<div class="alert alert-info" role="alert">
			@Translate("The map is not properly configured")
		</div>
	}
</div>
