@extends('auth.layout.app')

@section('title', config('app.name') . ' - Connexion')

@section('content')


    <div class="kt-card max-w-md w-full">
    <form method="POST" action="{{ route('password.update') }}" class="kt-card-content flex flex-col gap-5 p-10" id="reset_password_change_password_form">
        @csrf
        {{-- Token --}}
        <input type="hidden" name="token" value="{{ request()->route('token') }}">

        <div class="text-center">
            <h3 class="text-lg font-medium text-mono">
                 {{ __('auth.password_reset.new_password_title') }}
            </h3>
            <span class="text-sm text-secondary-foreground">
               {{ __('auth.password_reset.new_password_subtitle') }}
            </span>
        </div>
        
        {{-- Session status --}}
        @if (session('status'))
            <div class="text-center text-sm text-success">
                {{ session('status') }}
            </div>
        @endif

        {{-- Email --}}
        <div class="flex flex-col gap-1">
            <div class="kt-input kt-input-lg">
                <i class="ki-outline ki-sms text-gray-500 "></i>
                <input
                    id="email"
                    name="email"
                    type="email"
                    class="kt-input"
                    placeholder="{{ __('auth.fields.email') }}"
                    value="{{ old('email', request('email')) }}"
                    required
                    autocomplete="email"
                    @error('email') aria-invalid="true" @enderror>
            </div>
            @error('email')
                <div class="text-xs text-red-600">{{ $message }}</div>
            @enderror
        </div>

        {{-- New password --}}
        <div class="flex flex-col gap-1">
            <div class="kt-input kt-input-lg" data-kt-toggle-password="true">
                <i class="ki-outline ki-lock-2 text-gray-500"></i>
                    <input
                        id="password"
                        name="password"
                        type="password"
                        class="kt-input"
                        placeholder="{{ __('security.password.placeholder_new') }}"
                        required
                        autocomplete="new-password"
                         @error('password') aria-invalid="true" @enderror>
                    <button
                        class="kt-btn kt-btn-sm kt-btn-ghost kt-btn-icon bg-transparent! -me-1.5"
                        data-kt-toggle-password-trigger="true"
                        type="button"
                        aria-label="{{ __('auth.toggle_password') }}">
                        <span class="kt-toggle-password-active:hidden"><i class="ki-outline ki-eye text-muted-foreground"></i></span>
                        <span class="hidden kt-toggle-password-active:block"><i class="ki-outline ki-eye-slash text-muted-foreground"></i></span>
                    </button>
            </div>
            @error('password')
               <div class="text-xs text-red-600">{{ $message }}</div>
            @enderror
        </div>

        {{-- Confirm new password --}}
        <div class="flex flex-col gap-1">
            <div class="kt-input kt-input-lg" data-kt-toggle-password="true">
                <i class="ki-outline ki-lock-2 text-gray-500"></i>
                    <input
                        id="password_confirmation"
                        name="password_confirmation"
                        type="password"
                        class="kt-input"
                        required
                        placeholder="{{ __('security.password.placeholder_confirm') }}"
                        autocomplete="new-password"
                         @error('password_confirmation') aria-invalid="true" @enderror>
                    <button
                        class="kt-btn kt-btn-sm kt-btn-ghost kt-btn-icon bg-transparent! -me-1.5"
                        data-kt-toggle-password-trigger="true"
                        type="button"
                        aria-label="{{ __('auth.toggle_password') }}">
                        <span class="kt-toggle-password-active:hidden"><i class="ki-outline ki-eye text-muted-foreground"></i></span>
                        <span class="hidden kt-toggle-password-active:block"><i class="ki-outline ki-eye-slash text-muted-foreground"></i></span>
                    </button>
            </div>

            @error('password_confirmation')
                <div class="text-xs text-red-600">{{ $message }}</div>
            @enderror
        </div>

        <button type="submit" class="kt-btn kt-btn-primary flex justify-center grow" data-test="reset-password-button">
            {{ __('auth.password_reset.new_password_action') }}
        </button>
    </form>
</div>



@endsection