<TelerikGrid @ref="@BookingEquipmentGridRef"
              Data="@BookingEquipmentList"
              EditMode="@GridEditMode.Incell"
              OnEdit="@OnEquipmentEdit"
              OnRowClick="@OnEquipmentRowClick"
              OnRowRender="@OnRowRenderHandler"
              OnUpdate="@OnEquipmentUpdate"
              OnStateInit="@((GridStateEventArgs<BookingEquipmentModel> args) => OnEquipmentGridStateInit(args))"
              Height="226px"
              Size="@ThemeConstants.Grid.Size.Small"
              SelectionMode="GridSelectionMode.Single"
              SelectedItems="@SelectedEquipmentList"
              FilterMode="GridFilterMode.FilterMenu"
              Resizable="true"
              Sortable="true"
              Reorderable="true"
              Pageable="true"
              EnableLoaderContainer="false"
              PageSize="25">
   <GridColumns>
                <GridColumn Field=@nameof(BookingEquipmentModel.IsChassis) Title="Chassis" Editable="false" Filterable="false" Width="5rem">
                    <Template>
                        @{
                            var bem = (BookingEquipmentModel)context;
                        }
                        <TelerikCheckBox Value="@bem.IsChassis" ValueExpression="@(() => bem.IsChassis)" ValueChanged="@((bool newValue) => OnChassisChanged(newValue, bem))" />
                    </Template>
                </GridColumn>

   </GridColumns>
</TelerikGrid>

    private Task OnChassisChanged(bool newValue, object item)
    {
        if (item == null) return Task.CompletedTask;

        BookingEquipmentModel selectedEquipmentModel = (BookingEquipmentModel)item;

        if (EditableState(SelectedBooking, selectedEquipmentModel) == BookingEquipmentState.EditableStatus.No) return Task.CompletedTask;

        selectedEquipmentModel.IsChassis = newValue;
        selectedEquipmentModel.IsEdit = true;
        DataState.State = DataState.States.UnSaved;

        return Task.CompletedTask;
    }

public class JasminUserAdProperties()
{
    [Required]
    public string Email { get; set; }
    [Required]
    public string Name { get; set; }

    /// <summary>
    /// Used for checkboxes
    /// </summary>
    public List<AdGroupDto> Groups { get; set; } = [];
}

@using Zeus.Shared.DTO

<TelerikWindow Width="450px" Centered="true" Visible="@(AdProperties != null)" Modal="true">
    <WindowTitle>
        <strong>Set Jasmin roles</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" OnClick="@CancelUpdateJasminRoles"/>
    </WindowActions>
    <WindowContent>
        <TelerikForm Model="@AdProperties" OnValidSubmit="@UpdateJasminRoles">
            <FormValidation>
                <DataAnnotationsValidator/>
            </FormValidation>
            <FormItems>
                @{
                    <FormItem>
                        <Template>
                            <label for="selectAllCheckbox">Selected All</label>
                            <TelerikCheckBox Id="selectAllCheckbox"
                                             Value="@SelectAllValue"
                                             ValueChanged="@((bool value) => ValueChanged(value))"
                                             Indeterminate="@SelectAllIndeterminate"/>
                        </Template>
                    </FormItem>
                    foreach (var group in AdProperties.Groups.OrderBy(g => g.Name))
                    {
                        <FormItem>
                            <Template>
                                <label for="@group.Id">@group.Name</label>
                                <TelerikCheckBox @bind-Value="@group.Selected" Id="@group.Id" Name="@group.Id"/>
                            </Template>
                        </FormItem>
                    }
                }

            </FormItems>
            <FormButtons>
                <TelerikButton Enabled="@CanEdit" ButtonType="ButtonType.Submit" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Save</TelerikButton>
                <TelerikButton OnClick="@CancelUpdateJasminRoles">Cancel</TelerikButton>
            </FormButtons>
        </TelerikForm>
    </WindowContent>
</TelerikWindow>

@code {

    [Parameter] public EventCallback<JasminUserAdProperties> UpdateRoles { get; set; }

    [Parameter] public EventCallback CancelUpdateRoles { get; set; }


    [Parameter] public JasminUserAdProperties AdProperties { get; set; }

    [Parameter] public bool CanEdit { get; set; }


    private bool SelectAllValue => AdProperties.Groups.All(eq => eq.Selected);
    private bool SelectAllIndeterminate => AdProperties.Groups.Any(eq => eq.Selected);

    private void ValueChanged(bool value)
    {
        AdProperties.Groups.ForEach(eq => { eq.Selected = value; });
    }

    private void CancelUpdateJasminRoles()
    {
        if (CancelUpdateRoles.HasDelegate)
        {
            CancelUpdateRoles.InvokeAsync();
        }
    }

    private void UpdateJasminRoles()
    {
        if (UpdateRoles.HasDelegate)
        {
            UpdateRoles.InvokeAsync(AdProperties);
        }
    }

}

<div>
    Telerik checkbox (does NOT display any error): <TelerikCheckBox TValue="bool" ValueChanged="@OnCheck" />
</div>

<div>
    Basic checkbox (displays the error): <input type="checkbox" @onchange="@OnCheck" />
</div>

@{
    async Task OnCheck()
    {
        throw new Exception("Something went wrong!");
    }
}

<ErrorBoundary>
    <ChildContent>
        <div class="page">
            <div class="sidebar">
                <NavMenu />
            </div>

            <main>
                <div class="top-row px-4">
                    <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
                </div>

                <article class="content px-4">
                    <TelerikRootComponent>
                        @Body
                    </TelerikRootComponent>
                </article>
            </main>
        </div>
    </ChildContent>
    <ErrorContent>
        ERROR!!!
    </ErrorContent>
</ErrorBoundary>