<x-guest-layout>
    <form method="POST" action="{{ route('register') }}">
        @csrf

        <div class="text-center mb-4">
            <h3 class="fw-bold text-primary">Buat Akun Siswa</h3>
            <p class="text-muted">Daftarkan diri Anda untuk mulai menjelajahi koleksi kami.</p>
        </div>

        <div class="mb-3">
            <label for="name" class="form-label">Nama Lengkap</label>
            <input id="name" class="form-control bg-body-tertiary @error('name') is-invalid @enderror" type="text" name="name" value="{{ old('name') }}" required autofocus autocomplete="name" />
            @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
            <input id="nisn" class="form-control bg-body-tertiary @error('nisn') is-invalid @enderror" type="text" name="nisn" value="{{ old('nisn') }}" required autocomplete="username" />
            @error('nisn')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror" type="password" name="password" required autocomplete="new-password" />
            @error('password')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="password_confirmation" class="form-label">Konfirmasi Password</label>
            <input id="password_confirmation" class="form-control bg-body-tertiary" type="password" name="password_confirmation" required autocomplete="new-password" />
        </div>

        <div class="d-grid mt-4">
            <button type="submit" class="btn btn-primary btn-lg">
                Daftar
            </button>
        </div>

        <p class="mt-4 text-center text-muted small">
            Sudah punya akun?
            <a href="{{ route('login') }}" class="fw-semibold text-decoration-none">Masuk di sini</a>
        </p>
    </form>
</x-guest-layout>