@using Radzen
@using System.Text.Json

<div class="rz-p-0 rz-p-md-12">
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-4 rz-mb-6 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);">
        <RadzenLabel Text="Variant:" />
        <RadzenSelectBar @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" class="rz-display-none rz-display-xl-flex" />
        <RadzenDropDown @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" class="rz-display-inline-flex rz-display-xl-none" />
    </RadzenStack>
    <RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
        <RadzenStack Gap="1rem" class="rz-p-sm-12">
            <RadzenFormField Text="First Name" Variant="@variant">
                <ChildContent>
                    <RadzenTextBox Name="FirstName" @bind-Value=@model.FirstName />
                </ChildContent>
                <Helper>
                    <RadzenRequiredValidator Component="FirstName" Text="First name is required." />
                </Helper>
            </RadzenFormField>
            <RadzenFormField Text="Last Name" Variant="@variant">
                <ChildContent>
                    <RadzenTextBox Name="LastName" @bind-Value=@model.LastName />
                </ChildContent>
                <Helper>
                    <RadzenRequiredValidator Component="LastName" Text="Last name is required." />
                </Helper>
            </RadzenFormField>
            <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" ></RadzenButton>
        </RadzenStack>
    </RadzenTemplateForm>
    <EventConsole @ref=@console />
</div>

@code {
    Variant variant = Variant.Outlined;

    class Model
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

    Model model = new Model();
    EventConsole console;

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

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