@using System.Text.Json
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms

<div class="rz-p-0 rz-p-md-12">
    <RadzenTemplateForm TItem="ContactInfo" EditContext=@editContext Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
        <DataAnnotationsValidator />
        <RadzenStack Gap="1rem">
            <RadzenRow AlignItems="AlignItems.Center" RowGap="0.25rem">
                <RadzenColumn Size="12" SizeMD="4" class="rz-text-align-start rz-text-align-md-end">
                    <RadzenLabel Text="Name" Component="Name" />
                </RadzenColumn>
                <RadzenColumn Size="12" SizeMD="8">
                    <RadzenTextBox Name="Name" @bind-Value=@model.Name Style="display: block; width: 100%;" />
                    <RadzenDataAnnotationValidator Component="Name" Style="position: absolute" />
                </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="Phone" Component="Phone" />
                </RadzenColumn>
                <RadzenColumn Size="12" SizeMD="8">
                    <RadzenTextBox Name="Phone" @bind-Value=@model.Phone Style="display: block; width: 100%;" />
                    <RadzenDataAnnotationValidator Component="Phone" Style="position: absolute" />
                </RadzenColumn>
            </RadzenRow>
            <RadzenRow AlignItems="AlignItems.Center" class="rz-mt-4">
                <RadzenColumn Size="12" Offset="0" SizeMD="8" OffsetMD="4">
                    <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem">
                        <RadzenButton ButtonType="ButtonType.Submit" Text="Submit" />
                        <RadzenButton Text="Validate" Click=@Validate ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" />
                    </RadzenStack>
                </RadzenColumn>
            </RadzenRow>
        </RadzenStack>
    </RadzenTemplateForm>
    <EventConsole @ref=@console />
</div>

@code {
    class ContactInfo
    {
        [Required(ErrorMessage = "Name is required.")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Phone is required.")]
        [Phone(ErrorMessage = "Provide a valid phone number.")]
        public string Phone { get; set; }
    }

    ContactInfo model = new ContactInfo();
    EditContext editContext;
    EventConsole console;

    protected override void OnInitialized()
    {
        editContext = new EditContext(model);
    }

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

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

    void Validate()
    {
        var isValid = editContext.Validate();
        console.Log($"Validate: IsValid = {isValid}");
    }
}
