@extends('layouts.auth')

@section('content')
<div class="text-center mb-4">
    <h3 class="text-center mb-2 text-black">{{ __('auth.reset_password') }}</h3>
    <span>{{ __('auth.create_new_password') }}</span>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('password.update') }}">
            @csrf

            <input type="hidden" name="token" value="{{ $token }}">

            <!-- Email Field -->
            <div class="mb-3">
                <label for="email" class="form-label mb-2 fs-13 label-color font-w500">
                    {{ __('auth.email_address') }}
                </label>

                <input id="email" type="email"
                    class="form-control @error('email') is-invalid @enderror"
                    name="email"
                    value="{{ $email ?? old('email') }}"
                    required
                    autocomplete="email"
                    autofocus
                    placeholder="{{ __('auth.enter_email_address') }}"
                >

                @error('email')
                    <div class="invalid-feedback"><strong>{{ $message }}</strong></div>
                @enderror
            </div>

            <!-- Password Field -->
            <div class="mb-3">
                <label for="password" class="form-label mb-2 fs-13 label-color font-w500">
                    {{ __('auth.password') }}
                </label>

                <input id="password" type="password"
                    class="form-control @error('password') is-invalid @enderror"
                    name="password"
                    required
                    autocomplete="new-password"
                    placeholder="{{ __('auth.enter_new_password') }}"
                >

                @error('password')
                    <div class="invalid-feedback"><strong>{{ $message }}</strong></div>
                @enderror
            </div>

            <!-- Confirm Password Field -->
            <div class="mb-4">
                <label for="password-confirm" class="form-label mb-2 fs-13 label-color font-w500">
                    {{ __('auth.confirm_password') }}
                </label>

                <input id="password-confirm" type="password"
                    class="form-control"
                    name="password_confirmation"
                    required
                    autocomplete="new-password"
                    placeholder="{{ __('auth.confirm_new_password') }}"
                >
            </div>

            <button type="submit" class="btn btn-primary btn-block">
                {{ __('auth.reset_password') }}
            </button>
        </form>

        <div class="text-center mt-3">
            <a href="{{ route('login') }}" class="text-primary">
                {{ __('auth.back_to_login') }}
            </a>
        </div>
    </div>
</div>
@endsection