{{-- <x-form-section submit="updatePassword">
    <x-slot name="form_heead">
        <x-slot name="title">
            {{ __('Update Password') }}
        </x-slot>
        <x-slot name="description">
            {{ __('Ensure your account is using a long, random password to stay secure.') }}
        </x-slot>
    </x-slot>
    <x-slot name="form">
        <div class="col-span-6 mt-3 sm:col-span-4">
            <x-label for="current_password" value="{{ __('Current Password') }}" />
            <x-input id="current_password" type="password" class="block w-full mt-1" wire:model="state.current_password"
                required autocomplete="current-password" />
            <x-input-error for="current_password" class="mt-2" />
        </div>
        <div class="col-span-6 mt-3 sm:col-span-4">
            <x-label for="password" value="{{ __('New Password') }}" />
            <x-input id="password" type="password" class="block w-full mt-1" wire:model="state.password" required
                autocomplete="new-password" />
            <x-input-error for="password" class="mt-2" />
        </div>
        <div class="col-span-6 mt-3 sm:col-span-4">
            <x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
            <x-input id="password_confirmation" type="password" class="block w-full mt-1"
                wire:model="state.password_confirmation" required autocomplete="new-password" />
            <x-input-error for="password_confirmation" class="mt-2" />
        </div>
    </x-slot>

    <x-slot name="actions">
        <x-button-form-update wire:loading.attr="disabled" :disabled="! Gate::check('update', $user)">
            {{ __('update') }}
        </x-button-form-update>
        <div class="text-xl me-3" wire:loading>
            {{ __('Updating') }}
        </div>
        <x-slot name="action_messages">
            <x-action-message class="me-3" on="saved">
                {{ __('Updated') }}
            </x-action-message>
        </x-slot>
    </x-slot>

</x-form-section> --}}



<div class="">
    <x-form-section-custom submit="updatePassword">

        <x-slot name="header">
            <x-slot name="icon">
                <x-fas-key class="w-14 h-14 text-emerald-600" />
            </x-slot>
            <x-slot name="title">
                {{ __('Update Password') }}
            </x-slot>
        </x-slot>


        <x-slot name="form">
            <div class="w-full">

                <div class="">
                    <x-label for="current_password" value="{{ __('Current Password') }}" />
                    <x-inline-input id="current_password" type="password" class="w-full"
                        wire:model="state.current_password" autocomplete="current-password">
                        <x-slot name="prefix">
                            <x-slot name="prefixIcon">
                                <x-fas-lock class="w-6 h-6 text-gray-900" />
                            </x-slot>
                        </x-slot>
                    </x-inline-input>
                    <x-input-error for="current_password" class="mt-2" />
                </div>

                <div class="">

                    <x-label for="password" value="{{ __('New Password') }}" />
                    {{--
                    <x-input id="password" type="password" class="block w-full mt-1" wire:model="state.password"
                        autocomplete="new-password" /> --}}


                    <x-inline-input id="password" type="password" class="w-full" wire:model="state.password"
                        autocomplete="new-password">
                        <x-slot name="prefix">
                            <x-slot name="prefixIcon">
                                <x-fas-lock class="w-6 h-6 text-gray-900" />
                            </x-slot>
                        </x-slot>
                    </x-inline-input>


                    <x-input-error for="password" class="mt-2" />
                </div>

                <div class="">
                    <x-label for="password_confirmation" value="{{ __('Confirm Password') }}" />
                    <x-inline-input id="password_confirmation" type="password" class="w-full"
                        wire:model="state.password_confirmation" autocomplete="new-password">
                        <x-slot name="prefix">
                            <x-slot name="prefixIcon">
                                <x-fas-lock class="w-6 h-6 text-gray-900" />
                            </x-slot>
                        </x-slot>
                    </x-inline-input>
                    <x-input-error for="password_confirmation" class="mt-2" />
                </div>



            </div>
        </x-slot>

        <x-slot name="footer">
            <x-button class="font-semibold text-gray-900 bg-emerald-600" wire:loading.remove>
                {{__('update')}}
            </x-button>
            <x-button wire:loading wire:loading.attr="disabled">
                <x-fas-spinner class="w-6 h-6 animate-spin" />
            </x-button>
            <x-slot name="messages">
                <x-action-message class="me-3" on="saved">
                    {{ __('Updated') }}
                </x-action-message>
            </x-slot>
        </x-slot>

    </x-form-section-custom>

</div>