@section('title', get_setting('site_name') . ' | ' . __('Password Change'))
<div class="d-flex justify-content-center align-items-center vh-100">
    <div class="card shadow-lg" style="width: 28rem;">
        <div class="card-body">
            <h5 class="card-title text-center mb-4">Change Password</h5>

            @if (session()->has('success'))
                <div class="alert alert-success" role="alert">
                    {{ session('success') }}
                </div>
            @endif

            <form wire:submit.prevent="updatePassword">
                <!-- Current Password -->
                <div class="mb-3">
                    <label for="current_password" class="form-label">Current Password</label>
                    <input
                        type="password"
                        id="current_password"
                        wire:model.defer="current_password"
                        class="form-control @error('current_password') is-invalid @enderror">
                    @error('current_password')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- New Password -->
                <div class="mb-3">
                    <label for="new_password" class="form-label">New Password</label>
                    <input
                        type="password"
                        id="new_password"
                        wire:model.defer="new_password"
                        class="form-control @error('new_password') is-invalid @enderror">
                    @error('new_password')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Confirm Password -->
                <div class="mb-3">
                    <label for="confirm_password" class="form-label">Confirm Password</label>
                    <input
                        type="password"
                        id="confirm_password"
                        wire:model.defer="confirm_password"
                        class="form-control @error('confirm_password') is-invalid @enderror">
                    @error('confirm_password')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Submit Button -->
                <div class="d-grid">
                    <button
                        type="submit"
                        class="btn btn-primary position-relative"
                        wire:loading.attr="disabled">
                        <span wire:loading.remove>Update Password</span>
                        <div
                            wire:loading.inline
                            class="spinner-border spinner-border-sm text-light"
                            role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>