<x-guest-layout>
    @if ($errors->has('forbidden'))
        <div class="alert alert-danger d-flex align-items-center" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <div>{{ $errors->first('forbidden') }}</div>
        </div>
    @endif

    <x-auth-session-status class="mb-4" :status="session('status')" />

    <form method="POST" action="{{ route('admin.login.store') }}">
        @csrf

        <input type="hidden" name="role" value="penjaga perpus">

        <div class="text-center mb-4">
            <i class="bi bi-shield-lock-fill text-primary fs-1 mb-3"></i>
            <h3 class="fw-bold text-primary">Login Petugas</h3>
            <p class="text-muted">Halaman ini khusus untuk Penjaga Perpustakaan.</p>
        </div>

        <div class="mb-3">
                <label for="nip" class="form-label">NIP/NIK</label>
                <input id="nip" class="form-control" type="text" placeholder="Masukan NIP/NIK" name="nip" required autofocus />
                <x-input-error :messages="$errors->get('nip')" class="mt-2" /> 
            </div>

        <div class="mb-3">
            <label for="password" class="form-label">Kata Sandi</label>
            <div class="input-group">
                <input id="password" class="form-control" placeholder="Masukan kata sandi" type="password" name="password" required />
                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                    <i class="bi bi-eye-slash-fill"></i>
                </button>
            </div>
        </div>

        <div class="d-grid mt-4">
            <button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">Masuk</button>
        </div>
        <p class="mt-4 text-center text-muted small">
            Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.
        </p>
    </form>
</x-guest-layout>
