@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Ecommerce.ProductCatalog
@using System.Collections.Generic


@{
	var groups = GetViewParameter("Groups") as List<FieldGroupViewModel>;
	bool hideGroupHeaders = GetViewParameterBoolean("HideGroupHeaders");
	bool hideTitle = GetViewParameterBoolean("HideTitle");
	string size = GetViewParameterString("Size");

	string title = Model.Item.GetString("Title");
	bool hideLabels = Model.Item.GetBoolean("HideFieldLabels");
	string titleFontSize = Model.Item.GetRawValueString("TitleFontSize", "display-4");
	string gapCss = size == "full" ? " gap-4" : " gap-2";

	if (!hideTitle)
	{
		<h2 class="g-col-12 @titleFontSize">@title</h2>
	}

	<div class="g-col-12">
		<div class="accordion accordion-flush w-100" id="Specifications_@Model.ID">
			@foreach (var group in groups)
			{
				var id = Guid.NewGuid().ToString();
				string groupHeadingId = $"SpecificationHeading_{Model.ID}_{id}";
				string groupItemId = $"SpecificationItem_{Model.ID}_{id}";

				<div class="accordion-item">
					<h2 class="accordion-header" id="@groupHeadingId">
						<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#@groupItemId" aria-expanded="false" aria-controls="@groupItemId">
							@(!hideGroupHeaders ? group.Name : string.Empty)
						</button>
					</h2>
					<div id="@groupItemId" class="accordion-collapse collapse" aria-labelledby="@groupHeadingId" data-bs-parent="#Specifications_@Model.ID">
						<div class="accordion-body">
							<div class="g-col-12">
								<dl class="grid @(gapCss)">
									@foreach (var field in group.Fields)
									{
										if (!hideLabels)
										{
											<dt class="g-col-4">@(field.Name)</dt>
										}

										<dd class="g-col-8 mb-0 text-break">@RenderPartial("Components/Specifications/Shared/FieldValue.cshtml", field)</dd>
									}
								</dl>
							</div>

						</div>
					</div>
				</div>
			}
		</div>
	</div>
}
