<section>
    <header>
        <h2 class="text-lg font-medium text-theme-heading flex items-center">
            <i class="fas fa-lock mr-2 text-theme-primary"></i>
            {{ __('Update Password') }}
        </h2>

        <p class="mt-1 text-sm text-theme-body">
            {{ __('Ensure your account is using a long, random password to stay secure.') }}
        </p>
    </header>

    <form method="post" action="{{ route('password.update') }}" class="mt-6" x-data="{ isSubmitting: false }" @submit="isSubmitting = true">
        @csrf
        @method('put')

        <div class="border-2 theme-divider rounded-lg p-6 theme-card">
            
            <x-forms.input 
                name="current_password"
                label="Current Password"
                type="password"
                icon="key"
                :required="true"
                help-text="Enter your current password to verify your identity"
            />

            <x-forms.input 
                name="password"
                label="New Password"
                type="password"
                icon="lock"
                help-text="Must be at least 8 characters long"
            />

            <x-forms.input 
                name="password_confirmation"
                label="Confirm New Password"
                type="password"
                icon="lock"
                help-text="Re-enter your new password to confirm"
            />

            {{-- Password Strength Indicator --}}
            <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <p class="text-sm text-blue-800 font-medium mb-2">
                    <i class="fas fa-shield-alt mr-2"></i>
                    Password Requirements:
                </p>
                <ul class="text-sm text-blue-700 space-y-1 ml-6">
                    <li><i class="fas fa-check-circle mr-2 text-green-600"></i>At least 8 characters long</li>
                    <li><i class="fas fa-info-circle mr-2 text-blue-600"></i>Mix of uppercase and lowercase letters (recommended)</li>
                    <li><i class="fas fa-info-circle mr-2 text-blue-600"></i>Include numbers and special characters (recommended)</li>
                </ul>
            </div>

        </div>

        <div class="flex items-center gap-4 mt-6">
            <button type="submit" :disabled="isSubmitting" class="px-6 py-3 theme-btn-primary rounded-lg transition transform hover:scale-105 shadow-md font-medium disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                <i x-show="!isSubmitting" class="fas fa-save mr-2"></i>
                <i x-show="isSubmitting" class="fas fa-spinner fa-spin mr-2"></i>
                <span x-text="isSubmitting ? 'Updating...' : '{{ __('Update Password') }}'"></span>
            </button>

            @if (session('status') === 'password-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 3000)"
                    class="text-sm text-green-600 font-medium"
                >
                    <i class="fas fa-check-circle mr-1"></i>
                    {{ __('Password updated successfully!') }}
                </p>
            @endif
        </div>
    </form>
</section>
