<x-guest-layout>
    <div class="space-y-8">
        <header class="space-y-3 mb-10">
            <h2 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter leading-tight">Reset Kredensial</h2>
            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] italic leading-relaxed">
                {{ __('Amankan kembali akun Anda dengan menetapkan kata sandi baru yang memenuhi standar keamanan Enterprise.') }}
            </p>
        </header>

        <form method="POST" action="{{ route('password.store') }}" class="space-y-8">
            @csrf

            <!-- Password Reset Token -->
            <input type="hidden" name="token" value="{{ $request->route('token') }}">

            <!-- Email Address -->
            <div class="space-y-4">
                <x-input-label for="email" :value="__('Email Terdaftar')" />
                <x-text-input id="email" class="block w-full opacity-50 cursor-not-allowed" type="email" name="email" :value="old('email', $request->email)" required readonly />
                <x-input-error :messages="$errors->get('email')" />
            </div>

            <!-- Password -->
            <div class="space-y-4">
                <x-input-label for="password" :value="__('Kata Sandi Baru')" />
                <x-text-input id="password" class="block w-full" type="password" name="password" required autocomplete="new-password" placeholder="********" />
                <x-input-error :messages="$errors->get('password')" />
            </div>

            <!-- Confirm Password -->
            <div class="space-y-4">
                <x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi Baru')" />
                <x-text-input id="password_confirmation" class="block w-full" type="password" name="password_confirmation" required autocomplete="new-password" placeholder="********" />
                <x-input-error :messages="$errors->get('password_confirmation')" />
            </div>

            <div class="flex items-center justify-end pt-6 border-t border-white/5">
                <x-primary-button class="w-full justify-center">
                    {{ __('Perbarui Kredensial Akun →') }}
                </x-primary-button>
            </div>
        </form>
    </div>
</x-guest-layout>
