<x-layouts.app title="Login">
    <div class="auth-wrap">
        <form class="form-card auth-card" method="post" action="{{ route('login.store') }}">
            @csrf
            <p class="eyebrow">Login Page</p>
            <h1>Access your portal</h1>
            <div class="field"><label>Email</label><input type="email" name="email" value="{{ old('email') }}" required autofocus></div>
            <div class="field"><label>Password</label><input type="password" name="password" required></div>
            <label class="actions"><input type="checkbox" name="remember" value="1" style="width:auto"> Remember me</label>
            <button class="btn full">Login</button>
            @if ($registrationEnabled)
                <p class="muted">New agency client? <a href="{{ route('register') }}">Create client account</a></p>
            @endif
        </form>
        @if ($demoLoginEnabled)
            <section class="form-card auth-card demo-login" aria-label="Demo login">
                <p class="eyebrow">Demo Login Module</p>
                <h2>Preview each portal</h2>
                <div class="demo-grid">
                    @foreach (['admin' => 'Admin Demo Login', 'client' => 'Client Demo Login', 'designer' => 'Designer Demo Login', 'gts-client' => 'GTS Client Demo'] as $role => $label)
                        <form method="post" action="{{ route('login.demo', $role) }}">
                            @csrf
                            <button class="demo-button">{{ $label }}</button>
                        </form>
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</x-layouts.app>
