@inherits ViewModelTemplate<ListEditorViewModel<string>>
@using Dynamicweb.Rendering
@using Dynamicweb.Content
@using Dynamicweb.Content.Items
@using Dynamicweb.Content.Items.Rendering
@using Dynamicweb.Frontend

@{ 
	string editorId = Model.EditorId;
	int optionsCount = 0;
}

<style>
	.swift-component-grid {
		max-inline-size: 60rem;
        grid-template-columns: repeat(auto-fill, minmax(0, 7rem));
	}

	.swift-component-label {
		font-size: .75em;
		background-color: var(--dw-gray-90);
		--bs-border-color: var(--dw-gray-150);
	}
	
	.swift-component-label:hover {
		--bs-border-color: var(--dw-gray-250);
	}

	.swift-component-input:checked ~ .swift-component-label {
		--bs-border-color: var(--dw-primary);
		--bs-border-width: 2px;
	}

</style>

@if (Model.Items is object)
{
	<div class="swift-component-grid d-grid w-100 gap-2 lh-1">
		@foreach (var option in Model.Items)
		{
			string title = !string.IsNullOrEmpty(option.GetString("Title")) ? option.GetString("Title") : Translate("Component");
			int componentId = option.PageID != 0 ? option.PageID : 0;
			int selectedComponentId = !string.IsNullOrEmpty(Model.SelectedValue) ? Convert.ToInt32(Model.SelectedValue) : 0;
			var pageService = new Dynamicweb.Content.PageService();
			var areaId = Model.AreaId;
			var websiteArea = Dynamicweb.Content.Services.Areas.GetArea(areaId);

			componentId = componentId > 0 && pageService.GetPageOrLanguage(componentId, areaId) != null ? pageService.GetPageOrLanguage(componentId, areaId).ID : componentId;
			selectedComponentId = selectedComponentId > 0 && pageService.GetPageOrLanguage(selectedComponentId, areaId) != null ? pageService.GetPageOrLanguage(selectedComponentId, areaId).ID : selectedComponentId;

			string checkedOption = selectedComponentId == componentId ? "checked" : "";
			checkedOption = selectedComponentId == 0 && optionsCount == 0 ? "checked" : checkedOption;

			<div style="aspect-ratio: 3/2;">
				<input class="swift-component-input visually-hidden" type="radio" id="@(editorId)_@componentId" name="@editorId" value="@componentId" @checkedOption>
				<label class="swift-component-label h-100 d-flex flex-column justify-content-between text-center gap-1 p-1 border rounded-2" for="@(editorId)_@componentId" role="button">
					<div class="fw-bold py-1">
						@title
					</div>
					<div class="pb-1 opacity-50">
						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
					</div>
				</label>
			</div>

			optionsCount++;
		}
	</div>
}
else
{
	<div class="swift-alert">@Translate("No components found")</div>
}
