@extends('layouts.portal')

@section('title', 'Sign in')

@section('content')
    <main class="portal-shell">
        <section class="brand-panel" aria-label="ERP POS">
            <a class="brand-lockup" href="{{ route('login') }}">
                <span class="brand-mark" aria-hidden="true">EP</span>
                <span class="brand-name">ERP <span>/ POS</span></span>
            </a>

            <div class="brand-copy">
                <p class="eyebrow">LOS ANGELES | OPERATIONS</p>
                <h1>One place for<br>the work <span>ahead.</span></h1>
            </div>

            <div class="brand-foot">
                <span>PRIVATE WORKSPACE</span>
                <span>EST. 2026</span>
            </div>
        </section>

        <section class="auth-panel">
            <div class="auth-top">ERP / POS | ACCOUNT ACCESS</div>

            <div class="auth-content">
                <p class="eyebrow">WELCOME BACK</p>
                <h2>Sign in</h2>
                <p class="auth-note">Use your username or email address.</p>

                <form method="POST" action="{{ route('login.store') }}">
                    @csrf

                    @error('login')
                        <p class="form-error" role="alert">{{ $message }}</p>
                    @enderror

                    <div class="field">
                        <label for="login">Username or email</label>
                        <input id="login" name="login" type="text" value="{{ old('login') }}" autocomplete="username" required autofocus>
                    </div>

                    <div class="field">
                        <label for="password">Password</label>
                        <input id="password" name="password" type="password" autocomplete="current-password" required>
                    </div>

                    <div class="remember-row">
                        <label for="remember">
                            <input id="remember" name="remember" type="checkbox" value="1">
                            <span>Keep me signed in</span>
                        </label>
                    </div>

                    <button class="login-button" type="submit">
                        <span>Continue</span>
                        <span aria-hidden="true">&rarr;</span>
                    </button>
                </form>
            </div>

            <footer class="auth-foot">Authorized accounts only</footer>
        </section>
    </main>
@endsection