<!doctype html>
<html lang="id" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Masuk &middot; {{ config('app.name', 'DSI112') }}</title>

    @vite(['resources/css/app.css', 'resources/js/site.js'])
</head>
<body class="flex h-full items-center justify-center bg-slate-50 font-sans text-slate-700 antialiased">
    <div class="w-full max-w-sm px-6">
        <div class="text-center">
            <a href="{{ url('/') }}" class="text-2xl font-semibold tracking-tight text-slate-900">
                DSI<span class="text-indigo-600">112</span>
            </a>
            <p class="mt-2 text-sm text-slate-500">Masuk ke portal staf</p>
        </div>

        <div class="mt-8 rounded-2xl bg-white p-8 shadow-sm ring-1 ring-slate-900/5">
            @if ($errors->any())
                <div class="mb-5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('login') }}" class="space-y-5">
                @csrf

                <div>
                    <label for="email" class="block text-sm font-medium text-slate-700">Email</label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="email"
                           class="mt-1.5 block w-full rounded-lg border border-slate-200 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-slate-700">Password</label>
                    <input id="password" type="password" name="password" required autocomplete="current-password"
                           class="mt-1.5 block w-full rounded-lg border border-slate-200 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                </div>

                <button type="submit"
                        class="w-full rounded-full bg-slate-900 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-indigo-600">
                    Masuk
                </button>
            </form>
        </div>
    </div>
</body>
</html>
