@extends('layouts.app', ['title' => 'Login | VejalNai'])

@section('content')
    <section class="page" style="display: grid; place-items: center;">
        <form class="card" method="POST" action="{{ route('login.store') }}" style="width: min(420px, 100%);">
            @csrf
            <h1 style="margin: 0 0 8px; font-size: 28px;">Admin Login</h1>
            <p class="muted" style="margin: 0 0 24px;">Sign in to manage VejalNai conversations, intents, and agents.</p>

            <label for="email" style="display: block; font-weight: 650; margin-bottom: 6px;">Email</label>
            <input
                id="email"
                name="email"
                type="email"
                value="{{ old('email') }}"
                required
                autofocus
                style="width: 100%; min-height: 42px; border: 1px solid #c8d4cb; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px;"
            >
            @error('email')
                <p style="color: #a62020; margin: 0 0 12px;">{{ $message }}</p>
            @enderror

            <label for="password" style="display: block; font-weight: 650; margin: 14px 0 6px;">Password</label>
            <input
                id="password"
                name="password"
                type="password"
                required
                style="width: 100%; min-height: 42px; border: 1px solid #c8d4cb; border-radius: 6px; padding: 8px 10px;"
            >
            @error('password')
                <p style="color: #a62020; margin: 8px 0 0;">{{ $message }}</p>
            @enderror

            <label style="display: flex; align-items: center; gap: 8px; margin: 16px 0 22px; color: #435348;">
                <input name="remember" type="checkbox" value="1">
                Remember this browser
            </label>

            <button class="button" type="submit" style="width: 100%;">Login</button>
        </form>
    </section>
@endsection
