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

@{
	var allSelectedFacets = Model.FacetGroups
    .SelectMany(g => g.Facets)
    .SelectMany(f => f.FacetOptions)
    .Where(o => o.Selected)
    .ToList();

	int facetGroupsCount = Model.FacetGroups.Count();
	string offcanvasToOpen = facetGroupsCount == 1 ? $"Post_Facet_{Model.FacetGroups.FirstOrDefault()?.Facets.FirstOrDefault()?.QueryParameter}" : "Post_Facet_AllFacetGroups";
}

<div class="d-flex gap-2 h-100">
	<button class="btn btn-sm btn-secondary py-2 py-md-0 hstack gap-2" data-dw-button="secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#@(offcanvasToOpen)" aria-controls="@(offcanvasToOpen)">
		<span class="icon-2">
			@ReadFile("/Files/Images/Icons/filter.svg")
		</span>
		<span>@Translate("Filter")</span>
		@if (allSelectedFacets.Any())
		{
			<span class="badge badge-neutral-light mt-1">@allSelectedFacets.Count</span>
		}
	</button>
</div>

@if (facetGroupsCount > 1) {
	<div class="offcanvas offcanvas-end" tabindex="-1" id="Post_Facet_AllFacetGroups" aria-labelledby="Post_Facet_AllFacetGroupsLabel">
		<div class="offcanvas-header">
			<h5 class="offcanvas-title" id="Post_Facet_AllFacetGroupsLabel">@Translate("Filters")</h5>
			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="@Translate("Close")"></button>
		</div>
		<div class="offcanvas-body px-0">
			@foreach (var facetGroup in Model.FacetGroups) 
			{
				<ul class="list-group list-group-flush">
					@foreach (var facet in facetGroup.Facets) 
					{
						var selectedFacets = facet.FacetOptions.Where(option => option.Selected).ToList();

						<li class="list-group-item hstack" data-dw-button="secondary" role="button" data-bs-toggle="offcanvas" data-bs-target="#Post_Facet_@facet.QueryParameter" aria-controls="Post_Facet_@(facet.QueryParameter)">
							<div class="flex-fill">
								@facet.Name
								@if (selectedFacets.Any())
								{
									<span class="badge badge-neutral-light ms-2">@selectedFacets.Count</span>
								}
							</div>
							<div class="icon-1">@ReadFile("/Files/Images/Icons/chevron-right.svg")</div>
						</li>
					}
				</ul>
			}
		</div>
	</div>
}

@foreach (var facetGroup in Model.FacetGroups) 
{
	foreach (var facet in facetGroup.Facets) 
	{ 		
		<div class="offcanvas offcanvas-end" tabindex="-1" id="Post_Facet_@(facet.QueryParameter)" aria-labelledby="Post_FacetLabel_@(facet.QueryParameter)">
			<div class="offcanvas-header justify-content-between">
				@if (facetGroupsCount > 1) {
					<button type="button" class="btn btn-link p-0" data-dw-button="link" data-bs-toggle="offcanvas" data-bs-target="#Post_Facet_AllFacetGroups" aria-controls="Post_Facet_AllFacetGroups">
						<span class="icon-2">@ReadFile("/Files/Images/Icons/arrow-left.svg")</span>
					</button>
				}
				<h5 class="offcanvas-title text-center" id="Post_FacetLabel_@(facet.QueryParameter)">@Translate("Select") @facet.Name</h5>
				<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="@Translate("Close")"></button>
			</div>
			<div class="offcanvas-body">
				@if (facet.RenderType == "Checkboxes" || facet.RenderType == string.Empty) 
				{
					foreach (var facetOption in facet.FacetOptions)
					{
						string? selected = facetOption.Selected ? "checked" : null;

						<div class="d-flex justify-content-between align-items-center py-2">
							<label class="form-check-label" for="Post_FacetOption_@(facetOption.Value)">
								@facetOption.Label
							</label>
							<div class="d-flex gap-2">
								<div class="opacity-50">(@facetOption.Count)</div>
								<input class="form-check-input" type="checkbox" value="@facetOption.Value" name="@facet.QueryParameter" id="Post_FacetOption_@(facetOption.Value)" @selected>
							</div>
						</div>
					}
				}
			</div>
			<div class="offcanvas-footer">
				<button type="button" class="btn btn-primary w-100" data-dw-button data-bs-dismiss="offcanvas">
					@Translate("Update")
				</button>
			</div>
		</div>
	}
}

