@extends('layouts.account')

@section('title', __('storefront.auth.enter_code'))

@section('account')

    <div class="flex max-w-2xl flex-col gap-12">

        <div class="flex flex-col gap-6">
            <h1 class="font-display text-h3 font-black tracking-tight sm:text-h2">
                {{ __('storefront.auth.enter_code') }}
            </h1>

            <p>
                {{ __('storefront.auth.code_sent_to') }} <strong class="break-all">{{ $email }}</strong>
            </p>

            <x-ui.status />
        </div>

        <form method="POST" action="{{ route('account.email.verify') }}" class="flex flex-col gap-8">
            @csrf

            <x-ui.field
                :label="__('storefront.auth.code')"
                for="account-email-code"
                :required="true"
                :error="$errors->first('code')"
            >
                <x-ui.input
                    id="account-email-code"
                    name="code"
                    inputmode="numeric"
                    autocomplete="one-time-code"
                    pattern="[0-9]{6}"
                    maxlength="6"
                    :required="true"
                    autofocus
                    class="text-2xl font-bold tracking-[0.5em]"
                    :aria-invalid="$errors->has('code') ? 'true' : null"
                    :aria-describedby="$errors->has('code') ? 'account-email-code-error' : null"
                />
            </x-ui.field>

            <div>
                <x-ui.button type="submit">{{ __('storefront.account.email_confirm') }}</x-ui.button>
            </div>
        </form>

        <div class="flex flex-wrap items-center gap-x-8 gap-y-4 text-sm">
            <form method="POST" action="{{ route('account.email.resend') }}">
                @csrf
                <button type="submit" class="cursor-pointer underline hover:no-underline">
                    {{ __('storefront.auth.resend_code') }}
                </button>
            </form>

            <a href="{{ route('account.email.edit') }}" class="underline hover:no-underline">
                {{ __('storefront.auth.change_email') }}
            </a>
        </div>

    </div>

@endsection