@extends('auth.layout')

@section('title', 'Set new password')

@section('content')
    <div class="mx-auto w-full max-w-md space-y-6 rounded-2xl border border-stone-200 bg-white p-6 shadow-xl shadow-stone-900/5 sm:p-8">
        <div>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700">Account security</p>
            <h1 class="mt-2 text-2xl font-semibold tracking-tight text-stone-950">Set your new password</h1>
            <p class="mt-2 text-sm leading-6 text-stone-600">
                You're using a temporary password. Choose a permanent one to continue.
            </p>
        </div>

        @if (session('status'))
            <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800" role="status">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('auth.change-password.update') }}" class="space-y-4">
            @csrf

            <div>
                <label for="password" class="mb-1.5 block text-sm font-medium text-stone-700">New password</label>
                <input
                    id="password"
                    type="password"
                    name="password"
                    required
                    minlength="6"
                    autofocus
                    class="vm-form-control w-full @error('password') border-rose-400 @enderror"
                    @error('password') aria-invalid="true" aria-describedby="password-error password-help" @else aria-describedby="password-help" @enderror
                >
                @error('password')
                    <p id="password-error" class="mt-1.5 text-sm text-rose-600">{{ $message }}</p>
                @enderror
                <p id="password-help" class="mt-1.5 text-xs leading-5 text-stone-500">At least 6 characters, including uppercase and lowercase letters, a number, and a symbol.</p>
            </div>

            <div>
                <label for="password_confirmation" class="mb-1.5 block text-sm font-medium text-stone-700">Confirm new password</label>
                <input
                    id="password_confirmation"
                    type="password"
                    name="password_confirmation"
                    required
                    minlength="6"
                    class="vm-form-control w-full"
                >
            </div>

            <button type="submit" class="w-full rounded-xl bg-emerald-700 px-5 py-3 font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-600 focus:ring-offset-2">
                Set password &amp; continue
            </button>
        </form>
    </div>
@endsection