@using TIAMWebApp.Shared.Application.Models.PageModels;
<EditForm Model="@loginModel" OnValidSubmit="GoToNextStep">
            <DataAnnotationsValidator />
    

    <div class="form-field d-flex align-items-center">
        

        <DxMaskedInput @bind-Value="@loginModel.Email"
        Id="Email"
               CssClass="cw-320"                          
               Mask="@EmailMask"
               MaskMode="MaskMode.RegEx">
    <DxRegExMaskProperties MaskAutoCompleteMode="@((MaskAutoCompleteMode)AutoCompleteMode)"
                           Placeholder="Placeholder"
                           PlaceholdersVisible="PlaceholderVisible" />
                           </DxMaskedInput>
        
        
    </div>
    <ValidationMessage For="@(() => loginModel.Email)" />
    
    <button class="btn btn-primary mt-3" type="submit">
        <span class="@spinnerClass"></span>
        Next
        </button>
    
</EditForm>



@code {
    [Parameter]
    public LoginModel loginModel { get; set; }

    //[Parameter]
    //public string Email { get; set; }

    [Parameter]
    public EventCallback<string> onLoginNext { get; set; }

    [Parameter]
    public EventCallback<LoginModel> LoginModelChanged { get; set; }

    IEnumerable<char> PredefinedPlaceholders { get; set; } = new List<char>() { '_', '#' };

    string EmailMask { get; set; } = @"(\w|[.-])+@(\w|-)+\.(\w|-){2,4}";
    MaskAutoCompleteMode AutoCompleteMode { get; set; } = MaskAutoCompleteMode.Strong;
    char Placeholder { get; set; } = '_';
    bool PlaceholderVisible { get; set; } = false;

    private string spinnerClass = "";

    private async Task GoToNextStep()
    {
        spinnerClass = "spinner-border spinner-border-sm";
        await Task.Delay(500);
        spinnerClass = "";
        await LoginModelChanged.InvokeAsync(loginModel);
        await onLoginNext.InvokeAsync();
    }

}