@php
    $isRegister = $mode === 'register';
    // Each form posts back to its own address, so only the form that was sent shows its errors and typed values.
    $signInErrors = $isRegister ? new \Illuminate\Support\MessageBag : $errors->getBag('default');
    $signUpErrors = $isRegister ? $errors->getBag('default') : new \Illuminate\Support\MessageBag;
    $titles = ['login' => "Sign In — {$brand}", 'register' => "Create Account — {$brand}"];
@endphp

<x-storefront.layout :title="$isRegister ? 'Create Account' : 'Sign In'">
    <x-slot:head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap">
    </x-slot:head>
    <x-slot:header>
        <x-storefront.top-bar />
        <x-storefront.main-header />
    </x-slot:header>

    <div class="sm-auth-stage">
        <h1 class="visually-hidden">{{ $brand }} account</h1>

        <div @class(['sm-auth-slider', 'is-register' => $isRegister]) data-saruar-auth data-login-url="{{ route('login') }}" data-register-url="{{ route('register') }}" data-login-title="{{ $titles['login'] }}" data-register-title="{{ $titles['register'] }}">
            <div class="sm-auth-form sm-auth-signin" @if ($isRegister) inert @endif>
                <form method="POST" action="{{ route('login') }}">
                    @csrf
                    <h2>Sign In</h2>
                    <x-storefront.auth-social />
                    <p class="sm-auth-small">Sign in With Email &amp; Password</p>

                    @if (session('status'))
                        <p class="sm-auth-status" role="status">{{ session('status') }}</p>
                    @endif

                    <label class="visually-hidden" for="signInEmail">E-mail</label>
                    <input id="signInEmail" name="email" type="email" value="{{ $isRegister ? '' : old('email') }}" placeholder="Enter E-mail" autocomplete="username" maxlength="150" required @class(['form-control', 'is-invalid' => $signInErrors->has('email')]) @if ($signInErrors->has('email')) aria-describedby="signInEmailError" @endif>
                    @if ($signInErrors->has('email'))
                        <p id="signInEmailError" class="sm-auth-error">{{ $signInErrors->first('email') }}</p>
                    @endif

                    <label class="visually-hidden" for="signInPassword">Password</label>
                    <input id="signInPassword" name="password" type="password" placeholder="Enter Password" autocomplete="current-password" maxlength="255" required @class(['form-control', 'is-invalid' => $signInErrors->has('password')]) @if ($signInErrors->has('password')) aria-describedby="signInPasswordError" @endif>
                    @if ($signInErrors->has('password'))
                        <p id="signInPasswordError" class="sm-auth-error">{{ $signInErrors->first('password') }}</p>
                    @endif

                    <div class="form-check sm-auth-small sm-auth-remember">
                        <input id="remember" name="remember" class="form-check-input" type="checkbox" value="1" @checked(! $isRegister && old('remember'))>
                        <label class="form-check-label" for="remember">Remember me</label>
                    </div>
                    <a class="sm-auth-small sm-auth-forgot" href="{{ route('password.request') }}">Forget Password?</a>

                    <button class="btn sm-btn-primary sm-auth-submit" type="submit">Sign In</button>
                </form>
            </div>

            <div class="sm-auth-form sm-auth-signup" @unless ($isRegister) inert @endunless>
                <form method="POST" action="{{ route('register') }}">
                    @csrf
                    <h2>Create Account</h2>
                    <x-storefront.auth-social />
                    <p class="sm-auth-small">Register with E-mail</p>

                    @foreach ([
                        ['name', 'signUpName', 'Name', 'text', 'name', 150],
                        ['email', 'signUpEmail', 'Enter E-mail', 'email', 'username', 150],
                        ['password', 'signUpPassword', 'Enter Password', 'password', 'new-password', 255],
                        ['password_confirmation', 'signUpPasswordConfirmation', 'Confirm Password', 'password', 'new-password', 255],
                    ] as [$field, $id, $placeholder, $type, $autocomplete, $maxLength])
                        <label class="visually-hidden" for="{{ $id }}">{{ $placeholder }}</label>
                        <input id="{{ $id }}" name="{{ $field }}" type="{{ $type }}" value="{{ $isRegister && $type !== 'password' ? old($field) : '' }}" placeholder="{{ $placeholder }}" autocomplete="{{ $autocomplete }}" maxlength="{{ $maxLength }}" @if ($field === 'password') minlength="8" @endif required @class(['form-control', 'is-invalid' => $signUpErrors->has($field)]) @if ($signUpErrors->has($field)) aria-describedby="{{ $id }}Error" @endif>
                        @if ($signUpErrors->has($field))
                            <p id="{{ $id }}Error" class="sm-auth-error">{{ $signUpErrors->first($field) }}</p>
                        @endif
                    @endforeach

                    <button class="btn sm-btn-primary sm-auth-submit" type="submit">Sign Up</button>
                </form>
            </div>

            <div class="sm-auth-overlay-wrap">
                <div class="sm-auth-overlay">
                    <div class="sm-auth-panel sm-auth-panel-left" @unless ($isRegister) inert @endunless>
                        <h2>Welcome To<br>{{ $brand }}</h2>
                        <p>Sign In With Email &amp; Password</p>
                        <a class="sm-auth-ghost" href="{{ route('login') }}" data-auth-switch="login">Sign In</a>
                    </div>
                    <div class="sm-auth-panel sm-auth-panel-right" @if ($isRegister) inert @endif>
                        <h2>M/s. Saruar Mart</h2>
                        <p>Sign up now and enjoy your shopping experience!</p>
                        <a class="sm-auth-ghost" href="{{ route('register') }}" data-auth-switch="register">Sign Up</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-storefront.layout>