@extends('layouts.app')

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

@push('seo')
    <meta name="robots" content="noindex, follow">
@endpush

{{-- Only on pages with a captcha, not in the global layout. --}}
@push('scripts')
    <script src="https://js.hcaptcha.com/1/api.js?hl={{ app()->getLocale() }}" async defer></script>
@endpush

@section('content')

    <section class="mx-auto max-w-2xl px-4 py-20 sm:px-8 sm:py-32">

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

        {{-- Unescaped: the label holds a <br /> (edited in Filament › Language Lines, staff only). --}}
        <p class="mb-12">{!! __('storefront.auth.login_intro') !!}</p>

        {{-- e.g. "account deletion scheduled", after AccountController::destroy() --}}
        <x-ui.status class="mb-12" />

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

            <x-ui.field
                :label="__('storefront.auth.email')"
                for="login-email"
                :required="true"
                :error="$errors->first('email')"
            >
                <x-ui.input
                    id="login-email"
                    name="email"
                    type="email"
                    autocomplete="email"
                    :value="old('email')"
                    :required="true"
                    autofocus
                    :aria-invalid="$errors->has('email') ? 'true' : null"
                    :aria-describedby="$errors->has('email') ? 'login-email-error' : null"
                />
            </x-ui.field>

            {{-- Shown to everyone. Recording acceptance for new accounts is a
                 boboko-core task (UserOtpService). Unescaped: the label holds the
                 two links (Language Lines, staff only). --}}
            <p class="text-sm text-neutral-500 [&_a]:underline [&_a:hover]:no-underline">
                {!! __('storefront.auth.terms_notice', [
                    'terms' => route('legal.terms'),
                    'privacy' => route('legal.privacy'),
                ]) !!}
            </p>

            {{-- hCaptcha checkbox, verified by App\Rules\HCaptcha. The widget adds
                 the `h-captcha-response` field itself. Fixed height reserves the
                 iframe's space so the button doesn't jump when it loads. --}}
            <x-ui.field for="login-captcha" :error="$errors->first('h-captcha-response')">
                <div
                    id="login-captcha"
                    class="h-captcha min-h-[78px]"
                    data-sitekey="{{ config('services.hcaptcha.sitekey') }}"
                    @if ($errors->has('h-captcha-response')) aria-describedby="login-captcha-error" @endif
                ></div>
            </x-ui.field>

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

    </section>

@endsection