<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>
                {{'core.user.useraccount' | translate}}
            </h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="siteLogoLoaded && handlersLoaded">
        <ion-list>
            <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
                core-link auto-login="yes">
                <ion-label>
                    <!-- Show site logo. -->
                    <img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
                        onError="this.class='image-not-found'">
                    <p class="core-usermenu-sitename">
                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
                        </core-format-text>
                    </p>
                    <a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
                </ion-label>
            </ion-item>
            <ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
                detail="true" [attr.aria-label]="'core.user.profile' | translate">
                <core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
                <ion-label>
                    <p class="item-heading">{{ siteInfo.fullname }}</p>
                </ion-label>
            </ion-item>

            <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
                <ion-label>
                    <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
                </ion-label>
            </ion-item>

            <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
                [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
                [attr.aria-label]="handler.title | translate" detail="true">
                <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>
                    <p class="item-heading">{{ handler.title | translate }}</p>
                </ion-label>
                <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
                    {{handler.badge}}
                </ion-badge>
                <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
                    {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
                </span>
                <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
                </ion-spinner>
            </ion-item>

            <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
                class="core-user-menu-preferences">
                <ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>
                    <p class="item-heading">{{ 'core.settings.preferences' | translate }}</p>
                </ion-label>
            </ion-item>

            <ion-item *ngIf="displayContactSupport" button (click)="contactSupport($event)"
                [attr.aria-label]="'core.user.support' | translate" detail="true" detailIcon="open-outline" class="core-user-menu-support">
                <ion-icon name="fas-envelope" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>
                    <p class="item-heading">{{ 'core.user.support' | translate }}</p>
                </ion-label>
            </ion-item>
        </ion-list>
    </core-loading>
</ion-content>
<ion-footer>
    <ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" detail="true" class="ion-text-wrap">
        <ion-icon name="fas-right-left" slot="start" aria-hidden="true"></ion-icon>
        <ion-label>
            <p class="item-heading">{{ 'core.mainmenu.switchaccount' | translate }}</p>
        </ion-label>
    </ion-item>
    <div class="ion-padding">
        <ion-button (click)="logout($event)" expand="block" color="danger" [attr.aria-label]="'core.mainmenu.logout' | translate"
            class="ion-text-wrap">
            <ng-container *ngIf="!removeAccountOnLogout">
                <ion-icon name="fas-right-from-bracket" slot="start" aria-hidden="true"></ion-icon>
                {{ 'core.mainmenu.logout' | translate }}
            </ng-container>
            <ng-container *ngIf="removeAccountOnLogout">
                <ion-icon name="fas-trash" slot="start" aria-hidden="true"></ion-icon>
                {{ 'core.login.removeaccount' | translate }}
            </ng-container>
        </ion-button>
    </div>
</ion-footer>
