<div class="flex min-h-screen bg-bg">
    <x-auth.brand
        :headline="__('auth.brand_headline')"
        :sub="__('auth.brand_sub')"
        :facts="[
            __('auth.fact_location_term') => __('auth.fact_location'),
            __('auth.fact_backup_term') => __('auth.fact_backup'),
            __('auth.fact_restore_term') => __('auth.fact_restore'),
            __('auth.fact_support_term') => __('auth.fact_support'),
        ]" />

    {{-- Form panel --}}
    <main class="flex flex-1 items-center justify-center px-6 py-12">
        <div class="w-full max-w-sm animate-rise">
            <x-ui.brand size="md" class="mb-9 lg:hidden" />

            <h1 class="text-3xl font-bold leading-tight tracking-tight text-ink">{{ __('auth.login_title') }}</h1>
            <p class="mt-2 text-sm text-muted">{{ __('auth.login_subtitle') }}</p>

            @if (session('status'))
                <x-ui.alert variant="info" class="mt-5">{{ session('status') }}</x-ui.alert>
            @endif

            <form method="POST" action="{{ route('login.store') }}" class="mt-8 space-y-5">
                @csrf
                <x-ui.input name="email" type="email" :label="__('auth.email')" autocomplete="email" autofocus required value="{{ old('email') }}" />
                <x-ui.input name="password" type="password" :label="__('auth.password_label')" autocomplete="current-password" required />
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <x-ui.checkbox name="remember" :label="__('auth.remember')" value="1" />
                    <a href="{{ route('password.request') }}" class="text-sm text-muted underline-offset-4 hover:text-accent-text hover:underline">{{ __('auth.forgot_link') }}</a>
                </div>
                <x-ui.button type="submit" variant="primary" size="md" class="w-full">{{ __('auth.sign_in') }}</x-ui.button>
            </form>


            {{-- The one line that belongs on a sign-in page: this IS the page
                 a phishing kit copies, so the real one says how to tell. --}}
            <p class="mt-6 border-t border-line pt-4 text-xs leading-relaxed text-muted">
                {{ __('auth.phishing_note', ['host' => request()->getHost()]) }}
                <a href="{{ route('security') }}" class="font-medium text-accent-text underline-offset-4 hover:underline">{{ __('auth.phishing_link') }}</a>
            </p>
            <p class="mt-9 border-t border-line pt-6 text-center text-sm text-muted">
                {{ __('auth.no_account') }}
                <a href="{{ route('register') }}" wire:navigate class="font-medium text-accent-text hover:underline">{{ __('auth.sign_up') }}</a>
            </p>
        </div>
    </main>
</div>
