{{-- Change Password Modal (Tailwind sh-modal) --}}
@auth
<div id="myModal" class="sh-modal" role="dialog" aria-modal="true">
    <div class="sh-modal__backdrop" data-sh-close></div>
    <div class="sh-modal__panel">
        <div class="flex items-center justify-between p-5 border-b border-slate-100">
            <span class="font-display font-extrabold text-lg">{{ __('staticwords.ChangePassword') }}</span>
            <button type="button" data-sh-close class="w-9 h-9 grid place-items-center rounded-full hover:bg-slate-100" aria-label="Close">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6 6 18"/></svg>
            </button>
        </div>
        <div class="p-5">
            <form action="{{ route('pass.update', auth()->id()) }}" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.Oldpassword') }} *</label>
                    <input required type="password" name="old_password" id="old_password"
                        placeholder="{{ __('staticwords.Enteroldpassword') }}"
                        class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] @error('old_password') border-rose-400 @enderror">
                    @error('old_password')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.EnterPassword') }} *</label>
                    <input required type="password" name="password" id="password" minlength="8"
                        placeholder="{{ __('staticwords.EnterPassword') }}"
                        class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px] @error('password') border-rose-400 @enderror">
                    @error('password')<p class="text-rose-500 text-[12px] mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-[13px] font-semibold mb-1">{{ __('staticwords.ConfirmPassword') }} *</label>
                    <input required type="password" name="password_confirmation" id="confirm_password" minlength="8"
                        placeholder="{{ __('staticwords.re-enter-password') }}"
                        class="w-full h-11 px-3 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
                </div>
                <div class="flex items-center gap-2 pt-2">
                    <button @if(env('DEMO_LOCK')==0) type="submit" @else type="button" title="{{ __('Disabled in demo') }}" @endif
                            class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-5 py-2 rounded-lg flex items-center gap-2">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>
                        {{ __('staticwords.SaveChanges') }}
                    </button>
                    <button type="button" data-sh-close class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-5 py-2 rounded-lg">{{ __('staticwords.Cancel') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endauth