Files
StandManager/StandManager/Components/ClienteToggle.razor
2025-12-16 11:04:11 +01:00

81 lines
3.2 KiB
Plaintext

<div class="mb-4">
<!-- Etichetta Principale -->
<label class="form-label text-center mb-3 text-lg font-semibold" style="color: #1F2937; display: block;">
Sei già un nostro cliente?
</label>
<!-- Contenitore Tabler SelectGroup -->
<div class="form-selectgroup form-selectgroup-boxes d-flex w-100" style="display: flex; gap: 1rem;">
<!-- Opzione SI -->
<label class="form-selectgroup-item flex-fill" style="flex: 1 1 auto;">
<input type="radio"
name="clientType"
value="true"
class="form-selectgroup-input"
checked="@(Value == true)"
@onchange="@(() => OnSelectionChange(true))" />
<!-- Label visuale: Applica bordo e sfondo rosso chiaro se selezionato -->
<span class="form-selectgroup-label d-flex align-items-center justify-content-center p-3 h-100 rounded-3"
style="@(Value == true ? "border-color: #D63939; color: #D63939; background-color: rgba(214, 57, 57, 0.05);" : "")">
<span class="me-3 d-flex align-items-center">
<!-- Icona: Rossa se attiva, grigia se inattiva -->
<span class="material-icons-round text-3xl"
style="font-size: 1.875rem; @(Value == true ? "color: #D63939;" : "color: #9CA3AF;")">
<RadzenIcon Icon="check_circle" />
</span>
</span>
<div>
<span class="d-block font-medium text-lg" style="@(Value == true ? "color: #111827;" : "color: #374151;")">
</span>
</div>
</span>
</label>
<!-- Opzione NO -->
<label class="form-selectgroup-item flex-fill" style="flex: 1 1 auto;">
<input type="radio"
name="clientType"
value="false"
class="form-selectgroup-input"
checked="@(Value == false)"
@onchange="@(() => OnSelectionChange(false))" />
<span class="form-selectgroup-label d-flex align-items-center justify-content-center p-3 h-100 rounded-3"
style="@(Value == false ? "border-color: #D63939; color: #D63939; background-color: rgba(214, 57, 57, 0.05);" : "")">
<span class="me-3 d-flex align-items-center">
<span class="material-icons-round text-3xl"
style="font-size: 1.875rem; @(Value == false ? "color: #D63939;" : "color: #9CA3AF;")">
<RadzenIcon Icon="cancel" />
</span>
</span>
<div>
<span class="d-block font-medium text-lg" style="@(Value == false ? "color: #111827;" : "color: #374151;")">
No
</span>
</div>
</span>
</label>
</div>
</div>
@code {
[Parameter]
public bool? Value { get; set; }
[Parameter]
public EventCallback<bool> ValueChanged { get; set; }
private async Task OnSelectionChange(bool selection)
{
Value = selection;
await ValueChanged.InvokeAsync(Value ?? false);
}
}