@using BackOffice.Shared
@layout EmptyLayout
@attribute [Route(RouteConstance.VerifyCodePage + "{Mobile}")]
@attribute [AllowAnonymous]


<MudRTLProvider RightToLeft="true">
    <MudThemeProvider Theme="CustomMudTheme.CustomMudBlazorTheme" />
    <MudStack Style="width:100%;height:100vh;background:var(--mud-palette-background);" AlignItems="AlignItems.Center" Justify="Justify.Center">
        <MudPaper Elevation="4" Class="pa-8" Style="width:100%;max-width:420px;border-radius:16px;">
            <MudStack Spacing="4" AlignItems="AlignItems.Center">
                <MudIcon Icon="@Icons.Material.Filled.LockOpen" Color="Color.Primary" Size="Size.Large" />
                <MudText Typo="Typo.h5" Align="Align.Center">تأیید ورود</MudText>
                <MudText Typo="Typo.body2" Color="Color.Secondary" Align="Align.Center">کد ارسال‌شده به @Mobile را وارد کنید</MudText>
            </MudStack>
            <MudForm @ref="@_form" Model="@_request" Validation="@(_requestValidator.ValidateValue)" Class="mt-6">
                <MudStack Spacing="3">
                    <MudTextField T="string" @bind-Value="@_request.Code" For="() => _request.Code" Variant="Variant.Outlined" Label="رمز پویا" HelperText="لطفا کد شش رقمی دریافتی را وارد کنید" InputType="InputType.Telephone" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Pin" />
                    <MudButton Color="Color.Primary" Variant="Variant.Filled" Disabled="_isLoading" OnClick="OnSubmitClick" FullWidth="true" Size="Size.Large">
                        @if (_isLoading)
                        {
                            <MudProgressCircular Color="Color.Inherit" Size="Size.Small" Indeterminate="true" Class="me-2" />
                        }
                        ورود به حساب کاربری
                    </MudButton>
                    <MudButton Color="Color.Primary" Variant="Variant.Text" Disabled="@(_currentCount > 1 || _isLoading)" OnClick="OnResendOtpClick" FullWidth="true">
                        @(_currentCount < 1 ? "ارسال مجدد رمز پویا" : $"ارسال مجدد رمز پویا {_currentCount}")
                    </MudButton>
                </MudStack>
            </MudForm>
        </MudPaper>
    </MudStack>
</MudRTLProvider>


