@extends('layouts.auth', ['title' => 'Login - Booklio'])

@section('content')
    <x-ui.card padding="p-6 sm:p-7">
        <div class="mb-6">
            <x-ui.badge>Welcome back</x-ui.badge>
            <h1 class="mt-4 text-3xl font-extrabold tracking-tight text-booklio-dark">Login to Booklio</h1>
            <p class="mt-2 text-sm leading-6 text-booklio-muted">Access your appointments, customers, invoices, reminders, and booking links.</p>
        </div>

        @if (session('status'))
            <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login.store') }}" class="space-y-4">
            @csrf
            <x-form.input name="email" type="email" label="Email" value="owner@booklio.test" placeholder="you@example.com" />
            <x-form.input name="password" type="password" label="Password" value="password" placeholder="Enter your password" />

            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <label class="flex items-center gap-2 text-sm font-semibold text-slate-700">
                    <input name="remember" type="checkbox" checked class="h-4 w-4 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                    Remember me
                </label>
                <a href="{{ route('password.request') }}" class="text-sm font-bold text-booklio-primary hover:text-blue-700">Forgot password?</a>
            </div>

            <x-ui.button class="w-full" type="submit">Login</x-ui.button>
        </form>

        <p class="mt-6 text-center text-sm font-medium text-booklio-muted">
            New to Booklio?
            <a href="{{ route('register') }}" class="font-bold text-booklio-primary hover:text-blue-700">Register your business</a>
        </p>
    </x-ui.card>
@endsection