<div class="">
    <div class="grid grid-cols-1">
        <div class="card">
            <div class="card-header flex justify-between">
                <h3 class="card-title uppercase">
                    <i class="fas fa-cog"></i>
                    Update Password
                </h3>
            </div>



            <div class="card-body">
                <p class="mt-1 text-sm text-white-600 dark:text-white-400">
                    {{ __("Ensure your account is using a long, random password to stay secure.") }}
                </p>
                <div class="shadow-sm overflow-hidden mb-8  ">

               
                <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-6">
        @csrf
        @method('put')

        <div>
            <x-input-label for="update_password_current_password" :value="__('Current Password')" class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-white" />
            <x-text-input id="update_password_current_password" name="current_password" type="password" class="form-input mt-1 block w-full" autocomplete="current-password" />
            <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="update_password_password" :value="__('New Password')" class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-white"/>
            <x-text-input id="update_password_password" name="password" type="password" class="form-input mt-1 block w-full" autocomplete="new-password" />
            <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
        </div>

        <div>
        <x-input-label for="update_password_password_confirmation" :value="__('Confirm Password')" class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-white"/>
            <x-text-input id="update_password_password_confirmation" name="password_confirmation" type="password" class="form-input mt-1 block w-full" autocomplete="new-password" />
            <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
        </div>

        <div class="flex items-center gap-4">
            <x-primary-button class="btn-primary">{{ __('Save') }}</x-primary-button>

            @if (session('status') === 'password-updated')
                <p
                    x-data="{ show: true }"
                    x-show="show"
                    x-transition
                    x-init="setTimeout(() => show = false, 2000)"
                    class="btn-primary text-sm text-gray-600 dark:text-gray-400"
                >{{ __('Saved.') }}</p>
            @endif
        </div>
    </form>
                </div>
            </div>

        </div>
    </div>
</div>