<div class="d-flex flex-column h-100">
    <header>
        <app-instance-navbar
            [isAuthenticated]="isAuthenticated | async"
            [userProfile]="userProfile | async"
            [userRoles]="userRoles | async"
            [authenticationEnabled]="getAuthenticationEnabled()"
            [apiUrl]="getApiUrl()"
            [adminRoles]="getAdminRoles()"
            [instance]="instance | async"
            [webpageFamilyList]="webpageFamilyList | async"
            [webpageList]="webpageList | async"
            [firstWebpage]="firstWebpage | async"
            (login)="login()"
            (logout)="logout()"
            (openEditProfile)="openEditProfile()">
        </app-instance-navbar>
    </header>
    <main role="main" class="container-fluid pb-4 instance-main">
        <router-outlet></router-outlet>
    </main>
    <app-instance-footer class="footer mt-auto"
        [instance]="instance | async"
        [apiUrl]="getApiUrl()">
    </app-instance-footer>
</div>