@page
@model AccessDeniedModel
@{
    ViewData["Title"] = "Access denied";
    @inject UserManager<UserModel> _userManager
    var user = await _userManager.GetUserAsync(User);
    if (user != null)
    {
        var userComDept = user.departmentId;
        var userRole = await _userManager.GetRolesAsync(user);
    }
}

<header id="deniedHeader">
    <template v-if="ldapUserInfo.role.length == 0"><p class="text-danger">You do not have access to this resource because you have no role. Please contact the system administrator.</p></template>
    <template v-else><p class="text-danger">You do not have access to this resource.</p></template>
</header>
@section Scripts {
    <script>
    if (typeof jQuery === 'undefined') {
        console.error('jQuery is not loaded.');
    }
        $(function () {
            app.mount('#deniedHeader');
        });

        const app = Vue.createApp({
            data() {
                return {
                    ldapUserInfo: {
                        role: [],
                    },
                };
            },
            mounted() {
                this.getUserInfo();
            },
            watch: {

            },
            methods: {
                async getUserInfo() {
                    try {
                        // Show the loading modal
                        $('#loadingModal').modal('show');

                        // Perform the fetch request
                        const response = await fetch('/IdentityAPI/GetUserInformation', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                        });

                        // Check if the response is OK
                        if (!response.ok) {
                            const errorData = await response.json();
                            throw new Error(errorData.message);
                        }

                        const data = await response.json();

                        if (data.userInfo) {
                            console.log(data.userInfo)
                            this.ldapUserInfo = data.userInfo
                        } else {
                            console.error('Get user failed:', data);
                        }
                    }
                    catch (error) {
                        console.error('Error getting user information:', error);
                    }
                    finally {
                        await new Promise(resolve => {
                            $('#loadingModal').on('shown.bs.modal', resolve);
                        });
                        $('#loadingModal').modal('hide');
                    }
                },
            },
        });
    </script>
}