Auth

{{--
    Sign in: a card with email and password fields that posts to `action`
    (for Fortify: route('login')). layout="page" (default) centres the card in
    its own full-height section; layout="card" renders only the card, for a
    host guest layout that already frames the page.

    Every link is a prop; pass false or '' to hide it (the forgot
    password link, the sign-up footer). Every visible text is a prop and goes
    through __(). Validation errors come from the shared `email` and
    `password` error bag entries and are tied to their fields. The `providers`
    slot replaces the default social button; social=false hides the divider
    and the buttons. `brand` (a label) or the `brand` slot shows the product
    lockup: above the card with layout="page", at the top of the card header
    with layout="card". The output has no inline style, script or event handler,
    so it runs under a strict Content-Security-Policy.
--}}
@props([
    'layout' => 'page',
    // Product name for a brand lockup (the brand item); null shows none. The
    // `brand` slot replaces the lockup, for example a brand with a logo.
    'brand' => null,
    'brandHref' => null,
    'heading' => 'Welcome back',
    'subheading' => 'Sign in to your account to continue.',
    'headingLevel' => 3,
    'action' => '#',
    'formId' => null,
    'email' => null,
    'emailLabel' => 'Email address',
    'emailPlaceholder' => 'you@example.com',
    'emailAutocomplete' => 'email',
    'autofocus' => false,
    'passwordLabel' => 'Password',
    'forgotHref' => '#',
    'forgotLabel' => 'Forgot password?',
    'remember' => true,
    'rememberLabel' => 'Remember me',
    'submitLabel' => 'Sign in',
    'social' => true,
    'socialDividerLabel' => 'Or continue with',
    'socialLabel' => 'Sign in with Google',
    'registerHref' => '#',
    'registerPrompt' => "Don't have an account?",
    'registerLabel' => 'Sign up',
])

@php
    $asCard = $layout === 'card';
    $level = in_array((int) $headingLevel, [1, 2, 3], true) ? (int) $headingLevel : 3;
    $showsLink = static fn (mixed $href): bool => $href !== false && filled($href);
    $emailAutocomplete = filled($emailAutocomplete) ? (string) $emailAutocomplete : 'email';
    // A `brand` slot arrives in $brand as a ComponentSlot; a string is a label.
    $brandSlot = $brand instanceof \Illuminate\View\ComponentSlot ? $brand : null;
    $hasBrand = $brandSlot !== null ? $brandSlot->hasActualContent() : filled($brand);
    $brandLockup = null;
@endphp

@if ($hasBrand)
    @php ob_start(); @endphp
    <div data-slot="auth-sign-in-brand" class="flex justify-center">
        @if ($brandSlot !== null)
            {{ $brandSlot }}
        @else
            <x-ui.brand :label="(string) $brand" :href="filled($brandHref) ? $brandHref : null" />
        @endif
    </div>
    @php $brandLockup = new \Illuminate\Support\HtmlString(ob_get_clean()); @endphp
@endif

@php ob_start(); @endphp
    <x-ui.card @class(['w-full', 'max-w-sm' => ! $asCard]) :attributes="$asCard ? $attributes : new \Illuminate\View\ComponentAttributeBag()">
        <x-ui.card.header class="text-center">
            @if ($asCard && $brandLockup !== null)
                {{ $brandLockup }}
            @endif
            @if ($level === 3)
                <x-ui.card.title class="text-2xl">{{ __($heading) }}</x-ui.card.title>
            @else
                <h{{ $level }} data-slot="card-title" class="break-words text-2xl font-semibold leading-none tracking-tight">{{ __($heading) }}</h{{ $level }}>
            @endif
            @if (filled($subheading))
                <x-ui.card.description>{{ __($subheading) }}</x-ui.card.description>
            @endif
        </x-ui.card.header>

        <x-ui.card.content>
            <form method="POST" action="{{ $action }}" class="space-y-4" @if (filled($formId)) id="{{ $formId }}" @endif>
                @csrf

                <x-ui.field name="email">
                    <x-ui.label for="login-email" required>{{ __($emailLabel) }}</x-ui.label>
                    <x-ui.input id="login-email" type="email" :autocomplete="$emailAutocomplete" required :value="$email" :placeholder="filled($emailPlaceholder) ? __($emailPlaceholder) : null" :autofocus="(bool) $autofocus" />
                </x-ui.field>

                <x-ui.field name="password">
                    @if ($showsLink($forgotHref))
                        <div class="flex items-center justify-between">
                            <x-ui.label for="login-password" required>{{ __($passwordLabel) }}</x-ui.label>
                            <a href="{{ $forgotHref }}" class="text-sm font-medium text-link hover:underline">{{ __($forgotLabel) }}</a>
                        </div>
                    @else
                        <x-ui.label for="login-password" required>{{ __($passwordLabel) }}</x-ui.label>
                    @endif
                    <x-ui.input id="login-password" type="password" autocomplete="current-password" required />
                </x-ui.field>

                @if ($remember)
                    <label class="flex items-center gap-2 text-sm text-muted-foreground">
                        <x-ui.checkbox name="remember" />
                        {{ __($rememberLabel) }}
                    </label>
                @endif

                <x-ui.button type="submit" class="w-full">{{ __($submitLabel) }}</x-ui.button>
            </form>

            @if ($social)
                <div class="my-6 flex items-center gap-4">
                    <x-ui.separator class="flex-1" />
                    <span class="text-xs uppercase tracking-wide text-muted-foreground">{{ __($socialDividerLabel) }}</span>
                    <x-ui.separator class="flex-1" />
                </div>

                @isset($providers)
                    <div data-slot="auth-sign-in-providers" class="flex flex-col gap-2">{{ $providers }}</div>
                @else
                    <x-ui.social-button provider="google" type="button" block :label="__($socialLabel)" />
                @endisset
            @endif
        </x-ui.card.content>

        @if ($showsLink($registerHref))
            <x-ui.card.footer class="justify-center">
                <p class="text-sm text-muted-foreground">
                    {{ __($registerPrompt) }}
                    <a href="{{ $registerHref }}" class="font-medium text-link hover:underline">{{ __($registerLabel) }}</a>
                </p>
            </x-ui.card.footer>
        @endif
    </x-ui.card>
@php $card = new \Illuminate\Support\HtmlString(ob_get_clean()); @endphp

@if ($asCard)
    {{ $card }}
@else
    <x-ui.section space="md" @class(['flex min-h-svh items-center justify-center px-4', 'flex-col gap-6' => $brandLockup !== null]) {{ $attributes }}>
        {{ $brandLockup }}
        {{ $card }}
    </x-ui.section>
@endif