@extends('theme::layouts.app', ['title' => __('auth.Reset Password')])

@section('content')
    <div class="flex-grow flex items-center justify-center px-6 pb-16 pt-10">
        <div class="w-full max-w-md">
            <div
                class="bg-white dark:bg-surface-dark rounded-2xl border border-gray-100 dark:border-gray-800 shadow-lg p-8 md:p-10">
                <div class="text-center mb-8">
                    <h2 class="text-2xl font-bold text-text-main dark:text-white mb-2">@lang('auth.heading|Reset Password')</h2>
                    <p class="text-text-muted dark:text-gray-400 text-sm">@lang('auth.Create a new password for your account')</p>
                </div>

                <form class="space-y-5" action="{{ route('password.request') }}" method="POST" id="password-reset-form">
                    @csrf
                    <input type="hidden" name="token" value="{{ $token }}">

                    <div>
                        <label class="block text-sm font-medium text-text-main dark:text-gray-200 mb-1.5"
                            for="email">@lang('auth.Email Address')</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted material-symbols-outlined text-xl">mail</span>
                            <input
                                class="w-full pl-10 pr-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                                id="email" name="email" placeholder="name@company.com" required="" type="email" value="{{ $email ?? old('email') }}" autofocus />
                        </div>
                        @if ($errors->has('email'))
                            <p class="mt-2 text-sm text-red-600">{{ $errors->first('email') }}</p>
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-text-main dark:text-gray-200 mb-1.5"
                            for="password">@lang('auth.Password')</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted material-symbols-outlined text-xl">lock</span>
                            <input
                                class="w-full pl-10 pr-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                                id="password" name="password" placeholder="@lang('auth.New Password')" required="" type="password" />
                        </div>
                        @if ($errors->has('password'))
                            <p class="mt-2 text-sm text-red-600">{{ $errors->first('password') }}</p>
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-text-main dark:text-gray-200 mb-1.5"
                            for="password-confirm">@lang('auth.Confirm Password')</label>
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted material-symbols-outlined text-xl">lock_reset</span>
                            <input
                                class="w-full pl-10 pr-4 py-2.5 bg-gray-50 dark:bg-background-dark border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                                id="password-confirm" name="password_confirmation" placeholder="@lang('auth.Confirm Password')" required="" type="password" />
                        </div>
                        @if ($errors->has('password_confirmation'))
                            <p class="mt-2 text-sm text-red-600">{{ $errors->first('password_confirmation') }}</p>
                        @endif
                    </div>

                    @include('theme::partials.recaptcha', ['formId' => 'password-reset-form', 'action' => 'password_reset_confirm'])

                    <button
                        class="w-full py-3 px-4 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2 mt-4"
                        type="submit">
                        @lang('auth.button|Reset Password')
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection