<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>

        <ion-title><core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text></ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-list>
        <ion-item button *ngIf="siteInfo" class="ion-text-wrap" core-user-link [userId]="siteInfo.userid">
            <core-user-avatar [user]="siteInfo" slot="start"></core-user-avatar>
            <ion-label>
                <h2>{{siteInfo.fullname}}</h2>
                <p>
                    <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
                    </core-format-text>
                </p>
                <p>{{ siteUrl }}</p>
            </ion-label>
        </ion-item>
        <ion-item-divider><ion-label></ion-label></ion-item-divider>
        <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
            <ion-label><ion-spinner></ion-spinner></ion-label>
        </ion-item>
        <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
            (click)="openHandler(handler)" [attr.aria-label]="handler.title | translate" detail="true" detail="true">
            <ion-icon [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>
                <h2>{{ handler.title | translate}}</h2>
            </ion-label>
            <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge">{{handler.badge}}
            </ion-badge>
            <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading"></ion-spinner>
        </ion-item>
        <ng-container *ngFor="let item of customItems">
            <ion-item button *ngIf="item.type != 'embedded'" [href]="item.url" [attr.aria-label]="item.label" core-link
                [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" class="core-moremenu-customitem" detail="true">
                <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>
                    <h2>{{item.label}}</h2>
                </ion-label>
            </ion-item>
            <ion-item button *ngIf="item.type == 'embedded'" (click)="openItem(item)" [attr.aria-label]="item.label"
                class="core-moremenu-customitem" detail="true">
                <ion-icon [name]="item.icon" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>
                    <h2>{{item.label}}</h2>
                </ion-label>
            </ion-item>
        </ng-container>
        <ion-item button *ngIf="showScanQR" (click)="scanQR()" detail="true">
            <ion-icon name="fas-qrcode" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>
                <h2>{{ 'core.scanqr' | translate }}</h2>
            </ion-label>
        </ion-item>
        <ion-item button *ngIf="showWeb && siteInfo" [href]="siteInfo.siteurl" core-link autoLogin="yes"
            [attr.aria-label]="'core.mainmenu.website' | translate" detail="true">
            <ion-icon name="fas-globe" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>
                <h2>{{ 'core.mainmenu.website' | translate }}</h2>
            </ion-label>
        </ion-item>
        <ion-item button *ngIf="showHelp" [href]="docsUrl" core-link autoLogin="no"
            [attr.aria-label]="'core.mainmenu.help' | translate" detail="true">
            <ion-icon name="far-life-ring" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>
                <h2>{{ 'core.mainmenu.help' | translate }}</h2>
            </ion-label>
        </ion-item>
        <ion-item button router-direction="forward" routerLink="preferences"
            [attr.aria-label]="'core.settings.preferences' | translate" detail="true">
            <ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>
                <h2>{{ 'core.settings.preferences' | translate }}</h2>
            </ion-label>
        </ion-item>
        <ion-item button (click)="logout()" [attr.aria-label]="logoutLabel | translate" detail="true">
            <ion-icon name="fas-sign-out-alt" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>
                <h2>{{ logoutLabel | translate }}</h2>
            </ion-label>
        </ion-item>
        <ion-item-divider><ion-label></ion-label></ion-item-divider>
        <ion-item button router-direction="forward" routerLink="settings"
            [attr.aria-label]="'core.settings.appsettings' | translate" detail="true">
            <ion-icon name="fas-cogs" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>
                <h2>{{ 'core.settings.appsettings' | translate }}</h2>
            </ion-label>
        </ion-item>
    </ion-list>
</ion-content>
