@include('includes.auth-head', ['pageTitle' => __('general.recover_code_title')])

<main class="auth">
    <div class="auth__box">
        <div class="auth__brand">
            <img src="/assets/img/logo-color.svg" alt="BRASCAST">
        </div>

        <div class="auth__card">
            <div class="auth__head">
                <h1 class="auth__title">{{ __('general.recover_code_title') }}</h1>
                <p class="auth__sub">{{ __('general.recover_code_sub', ['email' => $email, 'minutes' => $minutes]) }}</p>
            </div>

            @include('recover.alerts')

            <form class="auth__form" method="POST" action="{{ route('recover.check') }}" id="codeForm">
                @csrf

                <div class="field">
                    <span class="field__label">{{ __('general.recover_code_label') }}</span>

                    <div class="authcode" data-code>
                        @for ($i = 0; $i < 6; $i++)
                            <input class="authcode__box" type="text" inputmode="numeric" pattern="[0-9]*"
                                   maxlength="1" autocomplete="{{ $i === 0 ? 'one-time-code' : 'off' }}"
                                   aria-label="{{ $i + 1 }}" @if($i === 0) autofocus @endif>
                        @endfor
                    </div>

                    <input type="hidden" name="code" data-code-value value="{{ old('code') }}">
                </div>

                <button type="submit" class="btn btn--primary auth__send">
                    <i class="fa-solid fa-check"></i>
                    <span>{{ __('general.recover_check') }}</span>
                </button>
            </form>

            <form class="auth__again" method="POST" action="{{ route('recover.resend') }}">
                @csrf
                <p class="auth__note">{{ __('general.recover_resend_help') }}</p>
                <button type="submit" class="auth__link auth__link--button">{{ __('general.recover_resend') }}</button>
            </form>

            <a class="auth__link auth__link--center" href="{{ route('login') }}">{{ __('general.recover_back_login') }}</a>
        </div>

        <p class="auth__foot">&copy; {{ date('Y') }} BRASCAST</p>
    </div>
</main>

<script src="{{ assetv('/assets/js/pages/recover.js') }}"></script>
</body>
</html>