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

@{ 
	string editorId = Model.EditorId;
}
<style>
	[data-swift-template="font"] > input:checked + label {
		--bs-border-color: var(--bs-primary);
	}
	[data-swift-template="font"] > label {
		cursor:pointer;
		--bs-border-color: var(--dw-gray-90);
		background-color: var(--dw-gray-90);
	}
	[data-swift-template="font"] > label > * {
		line-height: .75;
	}
	[data-swift-template="font"] > label:hover {
		--bs-border-color: var(--dw-blue-200);
	}
</style>

<div class="grid grid-2 grid-md-6 gap-2 w-100" data-swift-template="font">
	@foreach(var option in Model.Options){
		string optionName = !string.IsNullOrWhiteSpace(option.Name) ? option.Name.Replace(" ", "-") : "Default";
		<input class="d-none" type="radio" id="@(editorId)_@optionName" name="@editorId" value="@option.Value" @(Model.SelectedValue == option.Value.ToString() ? "checked" : string.Empty)>
		<label class="d-flex flex-column justify-content-between align-items-center gap-1 py-2 border border-2" for="@(editorId)_@optionName">
			<small class="text-uppercase opacity-50" style="font-size:10px !important;">@option.Value</small>
			<div class="@option.Value m-0">A</div>
			<span class="@option.Value m-0" style="font-size:10px !important;">Abc</span>
		</label>
	}

	@if (Model.Options.Count == 0) { 
		<div class="swift-alert">@Translate("No text styles found")</div>
	}
</div>
