@using Radzen
@using System.Text.Json

<RadzenStack class="rz-p-0 rz-p-md-12">
    <RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
        <RadzenFieldset Text="Comparison operator">
            <RadzenStack Gap="2rem" class="rz-p-4 rz-p-md-12">
                <RadzenRow AlignItems="AlignItems.Center" RowGap="0.25rem">
                    <RadzenColumn Size="12" SizeMD="4" class="rz-text-align-start rz-text-align-md-end">
                        <RadzenLabel Text="Operator" Component="Operator" />
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="8">
                        <RadzenDropDown Name="Operator" @bind-Value=@compareOperator Data=@(Enum.GetValues(typeof(CompareOperator)).Cast<CompareOperator>()) Style="width: 100%" />
                    </RadzenColumn>
                </RadzenRow>
                <RadzenRow AlignItems="AlignItems.Center" RowGap="0.25rem">
                    <RadzenColumn Size="12" SizeMD="4" class="rz-text-align-start rz-text-align-md-end">
                        <RadzenLabel Text="Value to compare with" Component="targetValue" />
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="8">
                        <RadzenNumeric @bind-Value=@targetValue Style="width: 100%" Name="targetValue" />
                    </RadzenColumn>
                </RadzenRow>
                <RadzenRow AlignItems="AlignItems.Center" RowGap="0.25rem">
                    <RadzenColumn Size="12" SizeMD="4" class="rz-text-align-start rz-text-align-md-end">
                        <RadzenLabel Text="Value" Component="Value" />
                    </RadzenColumn>
                    <RadzenColumn Size="12" SizeMD="8">
                        <RadzenNumeric @bind-Value=@model.Value Name="Value" style="display: block; width: 100%;" />
                        <RadzenCompareValidator Value=@targetValue Component="Value" Style="position: absolute" Operator=@compareOperator />
                    </RadzenColumn>
                </RadzenRow>
                <RadzenRow AlignItems="AlignItems.Center" class="rz-mt-4">
                    <RadzenColumn Size="12" Offset="0" SizeMD="8" OffsetMD="4">
                        <RadzenButton ButtonType="ButtonType.Submit" Text="Validate"></RadzenButton>
                    </RadzenColumn>
                </RadzenRow>
            </RadzenStack>
        </RadzenFieldset>
    </RadzenTemplateForm>
    <EventConsole @ref=@console />
</RadzenStack>

@code {
    class Model
    {
        public double Value { get; set; }
    }

    double targetValue = 1;

    CompareOperator compareOperator = CompareOperator.Equal;

    Model model = new Model();
    EventConsole console;

    void Log(string eventName, string value)
    {
        console.Log($"{eventName}: {value}");
    }

    void OnSubmit(Model model)
    {
        Log("Submit", JsonSerializer.Serialize(model, new JsonSerializerOptions() { WriteIndented = true }));
    }

    void OnInvalidSubmit(FormInvalidSubmitEventArgs args)
    {
        Log("InvalidSubmit", JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true }));
    }
}