<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 class="form-label" form-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 country-code mb-3">
                <input type="hidden" id="country_code" name="country_code" />

                <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>

        <% if(Object.keys(user).length === 0){ %>
            <!-- 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 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>
        <% } %>

        <!-- 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.username !== 'admin'){ %>
                            <option value="<%= role._id %>" 
                                <%= user.role_id && user.role_id.toString() == role._id.toString() ? 'selected' : '' %>>
                                <%= role.title %>
                            </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/jpeg, image/jpg, image/png, image/gif" 
                            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>

        <!-- Address -->
        <div class="break-line"></div>

        <h3 class="mb-3"><%= trans.cruds.ADDRESS.title_singular %></h3>
        <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="building_name">
                    <%= trans.cruds.ADDRESS.fields.building_name %>
                </label>
                <input class="form-control" type="text" id="building_name" name="building_name" value="<%= user?.address?.building_name || ''  %>"
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.building_name %>">
            </div>
        </div>
        <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="street">
                    <%= trans.cruds.ADDRESS.fields.street %>
                </label>
                <input class="form-control" type="text" id="street" name="street" value="<%= user?.address?.street|| '' %>"
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.street %>">
            </div>
        </div>
        <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="area">
                    <%= trans.cruds.ADDRESS.fields.area %>
                </label>
                <input class="form-control" type="text" id="area" name="area" value="<%= user?.address?.area || '' %>"
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.area %>">
            </div>
        </div>
        <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="area">
                    <%= trans.cruds.ADDRESS.fields.address_line_1 %>
                </label>
                <input class="form-control" type="text" id="address_line_1" name="address_line_1" value="<%= user?.address?.address_line_1 || '' %>"
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.address_line_1 %>">
            </div>
        </div>
        <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="address_line_2">
                    <%= trans.cruds.ADDRESS.fields.address_line_2 %>
                </label>
                <input class="form-control" type="text" id="address_line_2" name="address_line_2" value="<%= user?.address?.address_line_2 || '' %>"
                    placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.address_line_2 %>">
            </div>
        </div>

        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <input type="hidden" name="city_id" id="city_id" value="<%= user?.address?.city || '' %>">
            <div class="form-group mb-3">
                <label class="form-label" for="cityData"><%= trans.cruds.ADDRESS.fields.city %> <span class="text-danger">*</span></label>
                <select id="cityData" class="form-control select2" name="city" data-selected-city="<%= user?.address?.city || '' %>">
                    <option value=""><%= trans.messages.please_select + ' ' + trans.cruds.ADDRESS.fields.city %></option>
                </select>
            </div>
        </div>

        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <input type="hidden" name="state_id" id="state_id" value="<%= user?.address?.state || '' %>">
            <div class="form-group mb-3">
                <label class="form-label" for="stateData"><%= trans.cruds.ADDRESS.fields.state %> <span class="text-danger">*</span></label>
                <select id="stateData" class="form-control select2" name="state" data-selected-state="<%= user?.address?.state || '' %>">
                    <option value=""><%= trans.messages.please_select + ' ' + trans.cruds.ADDRESS.fields.state %></option>
                </select>
            </div>
        </div>

        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <input type="hidden" name="country_id" id="country_id" value="<%= user?.address?.country || '' %>">
            <div class="form-group mb-3">
                <label class="form-label" for="countryData"><%= trans.cruds.ADDRESS.fields.country %> <span class="text-danger">*</span></label>
                <select class="select2 form-control" name="country" id="countryData" data-selected-country="<%= user?.address?.country || '' %>">
                    <option value=""><%= trans.messages.please_select + ' ' + trans.cruds.ADDRESS.fields.country %></option>
                </select>
            </div>
        </div>

        <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="postal_code">
                    <%= trans.cruds.ADDRESS.fields.postal_code %> <span class="text-danger">*</span>
                </label>
                <div class="input-group">
                    <input class="form-control" type="text" id="postal_code" name="postal_code" value="<%= user?.address?.postal_code || '' %>"
                        placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.postal_code %>">
                </div>
            </div>
        </div>
        
    </div>
    <hr>
</div>