@php
            $usesKeycloakIdentity = config('services.keycloak.enabled') && config('services.keycloak.login_only');
        @endphp

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex flex-column gap-3">
                            <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar w-100">
                                    <div class="search-box dashboard-filter-control dashboard-filter-search">
                                        <input type="text" class="form-control form-control-sm" id="userSearch" placeholder="{{ __('Search name, email, ...') }}">
                                        <i class="ri-search-line search-icon"></i>
                                    </div>
                                    <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-document-type" id="userRoleFilter">
                                        <option value="all">{{ __('All Roles') }}</option>
                                        @foreach(($userRoleOptions ?? []) as $roleOptionKey => $roleOptionLabel)
                                            <option value="{{ $roleOptionKey }}">{{ __($roleOptionLabel) }}</option>
                                        @endforeach
                                    </select>
                                    <div class="admin-filter-reset-group">
                                        <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="userOrganizationFilter">
                                            <option value="all">{{ __('All Organizations') }}</option>
                                            <option value="__none__">{{ __('No Organization') }}</option>
                                            @foreach($userOrganizationFilterOptions as $organizationOption)
                                                <option value="{{ $organizationOption['value'] }}">{{ $organizationOption['label'] }}</option>
                                            @endforeach
                                        </select>
                                        <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="userStatusFilter">
                                            <option value="all">{{ __('All Status') }}</option>
                                            <option value="active">{{ __('Active') }}</option>
                                            <option value="inactive">{{ __('Inactive') }}</option>
                                            @if($usesKeycloakIdentity)
                                                <option value="removed">{{ __('Removed from Keycloak') }}</option>
                                            @endif
                                        </select>
                                        <button type="button" class="btn btn-sm btn-soft-secondary btn-icon flex-shrink-0" id="userResetFilterBtn" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}"><i class="ri-refresh-line"></i></button>
                                    </div>
                                    <div class="dropdown flex-shrink-0 ms-auto">
                                        <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><button class="dropdown-item admin-table-export" type="button" data-table-id="usersTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                            <li><button class="dropdown-item admin-table-export" type="button" data-table-id="usersTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                            <li><button class="dropdown-item admin-table-export" type="button" data-table-id="usersTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                        </ul>
                                    </div>
                                    @if($usesKeycloakIdentity)
                                        <a href="{{ app(\App\Services\KeycloakUrlService::class)->usersAdminUrl() }}"
                                           target="_blank"
                                           rel="noopener noreferrer"
                                           class="btn btn-sm btn-primary flex-shrink-0">
                                            <i class="ri-external-link-line me-1"></i> {{ __('Manage Users in Keycloak') }}
                                        </a>
                                    @else
                                        <button type="button" class="btn btn-sm btn-primary flex-shrink-0" data-bs-toggle="modal" data-bs-target="#modalCreateUser">
                                            <i class="ri-user-add-line me-1"></i> {{ __('Add New User') }}
                                        </button>
                                    @endif
                            </div>
                        </div>
                    </div>

                    <div class="card-body pt-0">
                        <x-dashboard-data-table
                            id="usersTable"
                            storage-key="admin-users-columns"
                            :columns="[
                                'name' => 220,
                                'email' => 260,
                                'role' => 190,
                                'organization' => 230,
                                'status' => 140,
                                'actions' => 110,
                            ]">
                                <thead class="table-light text-uppercase">
                                    <tr>
                                        <th class="sort" data-sort="name">{{ __('Name') }}</th>
                                        <th class="sort" data-sort="email">{{ __('Email') }}</th>
                                        <th class="sort" data-sort="role">{{ __('Role') }}</th>
                                        <th class="sort" data-sort="organization">{{ __('Organization') }}</th>
                                        <th class="sort" data-sort="status">{{ __('Status') }}</th>
                                        <th class="text-end">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse(($users ?? collect()) as $userItem)
                                        @php
                                            $roleKey = \App\Support\WorkflowPermission::normalizeRole((string) ($userItem->role ?? 'user'));
                                            $organizationRaw   = trim((string) ($userItem->organization_name ?? ''));
                                            $organizationLabel = $organizationRaw !== '' ? ($allOrganizationDisplayMap[$organizationRaw] ?? $organizationRaw) : '-';
                                            $roleLabel = __($userRoleOptions[$roleKey] ?? ucwords(str_replace(['-', '_'], ' ', $roleKey)));
                                            $employeeCode = (string) $userItem->id;
                                        @endphp
                                        @php
                                            $isRemovedFromKeycloak = $usesKeycloakIdentity && $userItem->keycloak_deleted_at !== null;
                                            $userStatusKey = $isRemovedFromKeycloak
                                                ? 'removed'
                                                : (($userItem->is_active ?? true) ? 'active' : 'inactive');
                                        @endphp
                                        <tr class="user-row"
                                            data-id="{{ $userItem->id }}"
                                            data-fullname="{{ $userItem->name }}"
                                            data-first-name="{{ (string) ($userItem->first_name ?? '') }}"
                                            data-last-name="{{ (string) ($userItem->last_name ?? '') }}"
                                            data-user-email="{{ $userItem->email }}"
                                            data-user-role="{{ $roleKey }}"
                                            data-organization-name="{{ $organizationRaw }}"
                                            @if($usesKeycloakIdentity)
                                                data-keycloak-admin-url="{{ app(\App\Services\KeycloakUrlService::class)->userAdminUrl($userItem) }}"
                                            @endif
                                            data-name="{{ strtolower($userItem->name) }}"
                                            data-email="{{ strtolower($userItem->email) }}"
                                            data-empid="{{ strtolower($employeeCode) }}"
                                            data-role="{{ $roleKey }}"
                                            data-status="{{ $userStatusKey }}">
                                            <td>
                                                <p class="mb-0 fw-semibold">{{ $userItem->name }}</p>
                                            </td>
                                            <td>{{ $userItem->email }}</td>
                                            <td>
                                                <x-ui-badge type="role" :value="$roleKey" :label="$roleLabel" />
                                            </td>
                                            <td>{{ $organizationLabel }}</td>
                                            <td>
                                                @php
                                                    $activeLabel = $isRemovedFromKeycloak
                                                        ? 'Removed from Keycloak'
                                                        : (($userItem->is_active ?? true) ? 'Active' : 'Inactive');
                                                @endphp
                                                <x-ui-badge type="status" :value="$activeLabel" :label="$activeLabel" />
                                            </td>
                                            <td class="text-end">
                                                <div class="dropdown d-inline-block">
                                                    <button class="btn btn-sm btn-icon btn-ghost-secondary admin-action-menu-trigger user-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('User actions') }}">
                                                        <i class="ri-more-2-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        @if($usesKeycloakIdentity)
                                                            <li>
                                                                <button type="button" class="dropdown-item edit-item-btn">
                                                                    <i class="ri-building-line me-2"></i>{{ __('Assign Organization') }}
                                                                </button>
                                                            </li>
                                                            <li>
                                                                <a href="{{ app(\App\Services\KeycloakUrlService::class)->userAdminUrl($userItem) }}" target="_blank" rel="noopener noreferrer" class="dropdown-item">
                                                                    <i class="ri-shield-user-line me-2"></i>{{ __('Manage in Keycloak') }}
                                                                </a>
                                                            </li>
                                                        @else
                                                            <li>
                                                                <button type="button" class="dropdown-item edit-item-btn">
                                                                    <i class="ri-pencil-line me-2"></i>{{ __('Edit') }}
                                                                </button>
                                                            </li>
                                                            <li>
                                                                <button type="button" class="dropdown-item reset-password-btn">
                                                                    <i class="ri-lock-password-line me-2"></i>{{ __('Reset Password') }}
                                                                </button>
                                                            </li>
                                                            <li><hr class="dropdown-divider"></li>
                                                            <li>
                                                                <button type="button" class="dropdown-item disable-item-btn" data-action="{{ ($userItem->is_active ?? true) ? 'disable' : 'enable' }}">
                                                                    <i class="{{ ($userItem->is_active ?? true) ? 'ri-close-circle-line' : 'ri-checkbox-circle-line' }} me-2"></i>{{ __(($userItem->is_active ?? true) ? 'Set Inactive' : 'Set Active') }}
                                                                </button>
                                                            </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">{{ __('No users found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                        </x-dashboard-data-table>
                        <x-table-pagination
                            wrap-id="usersPaginationWrap"
                            previous-id="usersPaginationPrev"
                            numbers-id="usersPageNumbers"
                            next-id="usersPaginationNext"
                            :hidden="true"
                        />
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalCreateUser" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __('Add New User') }}</h5>
                            <p class="text-muted mb-0">{{ __('Create a new user account and assign appropriate role and organization.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formCreateUser" action="{{ route('admin.users.store') }}">
                        @csrf
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('First Name') }}</label>
                                    <input type="text" name="first_name" class="form-control" required placeholder="{{ __('e.g. John') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('Last Name') }}</label>
                                    <input type="text" name="last_name" class="form-control" placeholder="{{ __('e.g. Doe') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Email') }}</label>
                                    <input type="email" name="email" class="form-control" required placeholder="{{ __('e.g. john@example.com') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Password') }}</label>
                                    <input type="password" name="password" class="form-control" required minlength="{{ $generalSettings['password_min_length'] ?? 8 }}" placeholder="{{ __('Minimum :min characters', ['min' => $generalSettings['password_min_length'] ?? 8]) }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Role') }}</label>
                                    <select name="role" id="addUserRole" class="form-select" required>
                                        @foreach(($userRoleOptions ?? []) as $roleOptionKey => $roleOptionLabel)
                                            <option value="{{ $roleOptionKey }}">{{ __($roleOptionLabel) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6" id="addUserOrganizationWrapper">
                                    <label class="form-label" id="addUserOrganizationLabel">{{ __('Organization') }}</label>
                                    <select class="form-select" name="organization_name" id="addUserOrganizationSelect">
                                        <option value="">-- {{ __('Please select an organization') }} --</option>
                                        @foreach($activeOrganizationOptions as $organizationOption)
                                            @php
                                                $organizationOptionLabel = $organizationDisplayMap[$organizationOption] ?? $organizationOption;
                                            @endphp
                                            <option value="{{ $organizationOption }}">{{ $organizationOptionLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 d-grid gap-2">
                                    <div class="form-check">
                                        <input type="hidden" name="is_active" value="0">
                                        <input class="form-check-input" type="checkbox" checked name="is_active" id="accountActive" value="1">
                                        <label class="form-check-label" for="accountActive">{{ __('Account is active') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Create User') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{-- Edit User Modal --}}
        <div class="modal fade" id="modalEditUser" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __($usesKeycloakIdentity ? 'Assign Organization' : 'Edit User') }}</h5>
                            <p class="text-muted mb-0">
                                {{ __($usesKeycloakIdentity ? 'Identity, role, password, and account status are managed in Keycloak.' : 'Update account details and access level.') }}
                            </p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formEditUser" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('First Name') }}</label>
                                    <input type="text" @unless($usesKeycloakIdentity) name="first_name" required @endunless id="editUserFirstName" class="form-control" @readonly($usesKeycloakIdentity) placeholder="{{ __('e.g. John') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('Last Name') }}</label>
                                    <input type="text" @unless($usesKeycloakIdentity) name="last_name" @endunless id="editUserLastName" class="form-control" @readonly($usesKeycloakIdentity) placeholder="{{ __('e.g. Doe') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Email') }}</label>
                                    <input type="email" @unless($usesKeycloakIdentity) name="email" required @endunless id="editUserEmail" class="form-control" @readonly($usesKeycloakIdentity) placeholder="{{ __('e.g. john@example.com') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Role') }}</label>
                                    <select @unless($usesKeycloakIdentity) name="role" required @endunless id="editUserRole" class="form-select" @disabled($usesKeycloakIdentity)>
                                        @foreach(($userRoleOptions ?? []) as $roleOptionKey => $roleOptionLabel)
                                            <option value="{{ $roleOptionKey }}">{{ __($roleOptionLabel) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12" id="editUserOrganizationWrapper">
                                    <label class="form-label" id="editUserOrganizationLabel">{{ __('Organization') }}</label>
                                    <select name="organization_name" id="editUserOrganization" class="form-select">
                                        <option value="">-- {{ __('Please select an organization') }} --</option>
                                        @foreach($activeOrganizationOptions as $organizationOption)
                                            @php
                                                $organizationOptionLabel = $organizationDisplayMap[$organizationOption] ?? $organizationOption;
                                            @endphp
                                            <option value="{{ $organizationOption }}">{{ $organizationOptionLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            @if($usesKeycloakIdentity)
                                <a href="{{ app(\App\Services\KeycloakUrlService::class)->usersAdminUrl() }}" id="editUserKeycloakLink" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary me-auto">
                                    <i class="ri-external-link-line me-1"></i>{{ __('Manage in Keycloak') }}
                                </a>
                            @endif
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __($usesKeycloakIdentity ? 'Save Organization' : 'Save Changes') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Reset User Password Modal --}}
        <div class="modal fade" id="modalResetUserPassword" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __('Reset Password') }}</h5>
                            <p class="text-muted mb-0">{{ __('The selected user password will be reset to the default password.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formResetUserPassword" action="">
                        @csrf
                        @method('PATCH')
                        <div class="modal-body">
                            <p class="mb-3" id="resetPasswordConfirmText">
                                {{ __('Reset password for') }}
                                <span class="fw-semibold" id="resetPasswordUserName"></span>
                                {{ __('to the default password?') }}
                            </p>
                            <div class="alert alert-warning mb-0" id="resetPasswordWarning">
                                {{ __('This will replace the current password. The user must use the default password on next login.') }}
                            </div>
                            <div class="d-none" id="resetPasswordResult">
                                <div class="alert alert-success">
                                    {{ __('Password reset successfully.') }}
                                </div>
                                <label class="form-label">{{ __('Default Password') }}</label>
                                <div class="input-group">
                                    <input type="password" id="resetUserPasswordValue" class="form-control" value="12345678" readonly>
                                    <button class="btn btn-light" type="button" id="toggleResetPasswordVisibility" aria-label="{{ __('Show password') }}">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal" id="resetPasswordCancelBtn">{{ __('Cancel') }}</button>
                            <button type="button" class="btn btn-light d-none" data-bs-dismiss="modal" id="resetPasswordCloseBtn">{{ __('Close') }}</button>
                            <button type="submit" class="btn btn-primary" id="resetPasswordSubmitBtn">
                                <i class="ri-lock-password-line me-1"></i>{{ __('Reset Password') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Hidden form for toggle status --}}
        <form method="POST" id="formToggleUser" action="" style="display:none;">
            @csrf
            @method('PATCH')
        </form>

        {{-- Hidden form for delete user --}}
        <form method="POST" id="formDeleteUser" action="" style="display:none;">
            @csrf
            @method('DELETE')
        </form>