@extends('layouts.public')

@section('title', 'Staff login')

@section('content')
    <div class="wrap" style="padding:64px 24px">
        <h1 style="font-size:30px;margin-bottom:24px">Staff login</h1>

        <form method="POST" action="{{ route('login') }}" style="display:flex;flex-direction:column;gap:14px">
            @csrf

            <label for="email" style="font-weight:700;font-size:14px">Email</label>
            <input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus
                style="height:48px;border-radius:12px;border:1.5px solid #CBD3CC;padding:0 14px;font-size:15px">

            <label for="password" style="font-weight:700;font-size:14px">Password</label>
            <input id="password" name="password" type="password" required
                style="height:48px;border-radius:12px;border:1.5px solid #CBD3CC;padding:0 14px;font-size:15px">

            @error('email')
                <p style="color:#B3261E;font-size:14px;margin:0">{{ $message }}</p>
            @enderror

            <label style="display:flex;gap:8px;align-items:center;font-size:14px">
                <input type="checkbox" name="remember"> Keep me logged in
            </label>

            <button class="btn" type="submit">Log in</button>
            <p style="font-size:14px;text-align:center;margin:0">
                New staff? <a href="{{ route('register') }}" style="font-weight:700">Register</a>
            </p>
        </form>
    </div>
@endsection