@attribute [Route(RouteConstants.Auth.Verify)]

<PageTitle>تأیید رمز پویا</PageTitle>

<MudStack AlignItems="AlignItems.Center">
    <MudCard Class="pa-6" Style="max-width:420px;width:100%;">
        <MudCardContent>
            <MudText Typo="Typo.h5" Class="mb-1" Align="Align.Center">تأیید رمز پویا</MudText>
            @if (!string.IsNullOrWhiteSpace(_phoneNumber))
            {
                <MudText Typo="Typo.body2" Class="mb-4" Align="Align.Center">کد ارسال‌شده به @_phoneNumber را وارد کنید.</MudText>
            }
            else
            {
                <MudText Typo="Typo.body2" Class="mb-4" Align="Align.Center">کد ارسال‌شده را وارد کنید.</MudText>
            }

            <MudForm @ref="_form" Model="_request" Validation="@(_requestValidator.ValidateValue)">
                <MudTextField @bind-Value="_request.Code"
                              For="@(() => _request.Code)"
                              Label="رمز پویا"
                              InputType="InputType.Text"
                              Variant="Variant.Outlined"
                              Immediate="true"
                              Required="true"
                              RequiredError="وارد کردن رمز پویا الزامی است."
                              HelperText="کد ۶ رقمی"
                              Class="mb-2"
                              MaxLength="6" />

                <MudText Typo="Typo.body1" Align="Align.Center" Class="mb-2">
                    تلاش باقی‌مانده: @_attemptsLeft از @MaxVerificationAttempts
                </MudText>

                @if (!string.IsNullOrWhiteSpace(_errorMessage))
                {
                    <MudAlert Severity="Severity.Error" Dense="true" Elevation="0" Class="mb-2">@_errorMessage</MudAlert>
                }

                @if (!string.IsNullOrWhiteSpace(_infoMessage))
                {
                    <MudAlert Severity="Severity.Success" Dense="true" Elevation="0" Class="mb-2">@_infoMessage</MudAlert>
                }

                <MudStack Spacing="2" Class="mt-2">
                    <MudButton Variant="Variant.Filled"
                               Color="Color.Primary"
                               OnClick="VerifyOtpAsync"
                               Disabled="_isBusy || IsVerificationLocked"
                               FullWidth="true">
                        تأیید و ورود
                    </MudButton>
                    <MudButton Variant="Variant.Text"
                               Color="Color.Secondary"
                               Disabled="_isBusy"
                               OnClick="ChangePhoneAsync">
                        تغییر شماره
                    </MudButton>
                </MudStack>

                <MudDivider Class="my-2" />

                @if (_resendRemaining > 0)
                {
                    <MudText Typo="Typo.body1" Align="Align.Center">
                        امکان ارسال مجدد تا @_resendRemaining ثانیه دیگر
                    </MudText>
                }
                else
                {
                    <MudButton Variant="Variant.Text"
                               Color="Color.Primary"
                               Disabled="_isBusy"
                               OnClick="ResendOtpAsync">
                        ارسال مجدد رمز پویا
                    </MudButton>
                }
            </MudForm>
        </MudCardContent>
    </MudCard>
</MudStack>