<div class="card-body">
    <div class="row">
        <!-- First Name Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group mb-3">
                <label class="form-label" for="first_name"><%= trans.cruds.USER.fields.first_name %> <span class="text-danger">*</span></label>
                <input class="form-control" type="text" id="first_name" name="first_name" 
                    value="<%= user.first_name || '' %>" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.first_name %>">
            </div>
        </div>

        <!-- Middle Name Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group mb-3">
                <label class="form-label" for="middle_name"><%= trans.cruds.USER.fields.middle_name %></label>
                <input class="form-control" type="text" id="middle_name" name="middle_name" 
                    value="<%= user.middle_name || '' %>" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.middle_name %>">
            </div>
        </div>

        <!-- Last Name Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group mb-3">
                <label classform-label" for="last_name"><%= trans.cruds.USER.fields.last_name %> <span class="text-danger">*</span></label>
                <input class="form-control" type="text" id="last_name" name="last_name" 
                    value="<%= user.last_name || '' %>" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.last_name %>">
            </div>
        </div>

        <!-- Username Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group mb-3">
                <label class="form-label" for="username"><%= trans.cruds.USER.fields.username %> <span class="text-danger">*</span></label>
                <input class="form-control" type="text" id="username" name="username" 
                    value="<%= user.username || '' %>" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.username %>">
            </div>
        </div>

        <!-- Email Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group mb-3">
                <label class="form-label" for="email"><%= trans.cruds.USER.fields.email %> <span class="text-danger">*</span></label>
                <input class="form-control email-text" type="text" id="email" name="email" 
                    value="<%= user.email || '' %>" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.email %>" autocomplete="off" autofocus>
            </div>
        </div>

        <!-- Phone Number Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group mb-3">
                <label class="form-label" for="phone_number"><%= trans.cruds.USER.fields.phone_number %></label>
                <input class="form-control phone-number-text" type="tel" id="phone_number" name="phone_number" 
                    value="<%= user.phone_number || '' %>" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.phone_number %>">
            </div>
        </div>

        <!-- Role Select -->
        <div class="col-sm-6 col-md-6">
            <div class="form-group mb-3">
                <label class="form-label" for="role"><%= trans.cruds.USER.fields.role %> <span class="text-danger">*</span></label>
                <select class="select2 form-control role_id" name="role" id="role">
                    <option value=""><%= trans.messages.please_select %></option>
                    <% roles.forEach((role) => { %>
                        <% if(role.name !== 'admin'){ %>
                            <option value="<%= role._id %>" 
                                <%= user.role_id && user.role_id.toString() == role._id.toString() ? 'selected' : '' %>>
                                <%= role.name.charAt(0).toUpperCase() + role.name.slice(1).toLowerCase() %>
                            </option>
                        <% } %>
                    <% }) %>
                </select>                              
            </div>            
        </div>

        <!-- File Upload -->
        <div class="col-sm-6 col-md-6">
            <div class="d-flex gap-5">
                <div class="flex-grow-1">
                    <div class="form-group mb-3">
                        <label class="form-label" for="formFile"><%= trans.global.choose_file %></label>
                        <input class="form-control" id="formFile" type="file" name="profile" accept="image/*" 
                            onchange="previewImage(this, 'imagePreview')">
                    </div>
                </div>
                <img class="img-100 image-preview-item" id="imagePreview" alt="" 
                    src="<%= profileImageUrl ? profileImageUrl : '/backend/images/dummy-image.jpg' %>">
            </div>
        </div>

        <!-- Password Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group mb-3">
                <label class="form-label" for="password"><%= trans.cruds.USER.fields.password %> <span class="text-danger">*</span></label>
                <div class="input-group">
                <input class="form-control password-field" type="password" id="password" name="password" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.password %>" autocomplete="new-password">
                     <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fa-solid fa-eye"></i>
            </button>
                </div>
            </div>
        </div>

        <!-- Confirm Password Input -->
        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <div class="form-group input-group mb-3">
                <label class="form-label" for="password_confirmation"><%= trans.cruds.USER.fields.password_confirmation %> <span class="text-danger">*</span></label>
                <div class="input-group">
                <input class="form-control password-field" type="password" id="password_confirmation" name="password_confirmation" 
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.USER.fields.password_confirmation %>" autocomplete="new-password">
                     <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fa-solid fa-eye"></i>
            </button>
                    </div>
            </div>
        </div>
    </div>
    <hr>
</div>
<script>
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', () => {
            const input = button.parentElement.querySelector('.password-field');
            const icon = button.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
</script>