<div class="row">
    <div class="col-12">
        <h1 class="h4 mb-3">{{ title }}</h1>
        <form id="frmUser" action="{{ admin_dir }}/users/edit?id={{ id }}" method="post" class="needs-validation" autocomplete="off" novalidate>
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label for="name">Fullname</label>
                        <input type="text" name="name" id="name" value="{{ name }}" class="form-control" placeholder="Your fullname" required>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" id="email" value="{{ email }}" class="form-control" placeholder="Your email address" required>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="form-group">
                        <label for="user">Username</label>
                        <input type="text" name="user" id="user" value="{{ user }}" class="form-control" placeholder="Your username" required>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="form-group">
                        <label for="name">User Role</label>
                        <select name="role" id="role" class="form-control" required>
                            <option value="">-- Select User Role --</option>
                            <option value="0" {{ role == 0 ? 'selected' : '' }}>Administrator</option>
                            <option value="1" {{ role == 1 ? 'selected' : '' }}>User</option>
                        </select>
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="form-group">
                        <label for="name">Status</label>
                        <select name="status" id="status" class="form-control" required>
                            <option value="">-- Select Status --</option>
                            <option value="0" {{ status == 0 ? 'selected' : '' }}>Inactive</option>
                            <option value="1" {{ status == 1 ? 'selected' : '' }}>Active</option>
                            <option value="2" {{ status == 2 ? 'selected' : '' }}>Need Approval</option>
                        </select>
                        <div class="invalid-feedback"></div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <label for="password">New Password</label>
                        <div class="input-group has-validation">
                            <input type="password" name="password" id="password" class="form-control" placeholder="Your new password" pattern="[^ ]{8,}" data-error-pattern="The password must contain at least 8 characters" data-error-required="The new password is required">
                            <div class="input-group-append">
                                <button class="btn btn-secondary btn-shp" data-shp="#password" type="button" data-toggle="tooltip" title="Show/hide New Password">
                                    <em class="fas fa-eye"></em>
                                </button>
                            </div>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password">Confirm New Password</label>
                        <div class="input-group has-validation">
                            <input type="password" name="retype_password" id="retype_password" class="form-control" placeholder="Confirm your new password" pattern="[^ ]{8,}" data-error-pattern="The confirm password must contain at least 8 characters" data-error-required="The confirm new password is required">
                            <div class="input-group-append">
                                <button class="btn btn-secondary btn-shp" data-shp="#retype_password" type="button" data-toggle="tooltip" title="Show/hide Confirm New Password">
                                    <em class="fas fa-eye"></em>
                                </button>
                            </div>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <input type="hidden" name="id" value="{{ id }}">
                    <button type="submit" class="btn btn-success">
                        <em class="fas fa-save mr-2"></em>Update
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
