@extends('layouts.guest')
@section('title', 'Sign in')

@section('content')
    <div class="auth-card">
        <header class="auth-card__header">
            <h1 class="auth-card__title">Welcome back</h1>
            <p class="auth-card__subtitle">Sign in to continue managing your inventory.</p>
        </header>

        <form method="POST" action="{{ route('login.attempt') }}" class="auth-card__form" novalidate>
            @csrf

            <x-form.input
                name="email"
                type="email"
                label="Email or phone"
                placeholder="you@company.com"
                autocomplete="username"
                required
            />

            <x-form.password
                name="password"
                label="Password"
                autocomplete="current-password"
                :show-toggle="true"
                :required="true"
            />

            <div class="d-flex align-items-center justify-content-between">
                <x-form.checkbox name="remember" label="Remember me on this device" />
                <a href="{{ route('password.request') }}" class="auth-card__link">Forgot password?</a>
            </div>

            <x-ui.button type="submit" variant="primary" size="lg" block>
                Sign in
            </x-ui.button>
        </form>

        <p class="auth-card__note text-muted small mt-3 mb-0">
            Protected by strong password policy, rate-limiting and CSRF verification.
        </p>
    </div>
@endsection