<ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement"
    [class.tabshidden]="!isMainScreen && tabsPlacement === 'bottom'" (ionTabsDidChange)="tabChanged($event)">
    <ion-tab-bar slot="bottom" class="mainmenu-tabs" [@menuVisibilityAnimation]="visibility">
        <ion-spinner *ngIf="!loaded" [attr.aria-label]="'core.loading' | translate" />

        <core-user-menu-button *ngIf="loaded && tabsPlacement === 'side'" [alwaysShow]="true" />

        <ion-tab-button *ngFor="let tab of tabs" (keydown)="tabAction.keyDown(tab.page, $event)" (keyup)="tabAction.keyUp(tab.page, $event)"
            [hidden]="!loaded && tab.hide" [tab]="tab.page" [disabled]="tab.hide" layout="label-hide" class="{{tab.class}}"
            [selected]="tab.page === selectedTab" [tabindex]="selectedTab === tab.page ? 0 : -1" [attr.aria-controls]="tab.id">
            <ion-icon class="core-tab-icon" [name]="tab.icon" aria-hidden="true" />
            <ion-label aria-hidden="true">{{ tab.title | translate }}</ion-label>
            <ion-badge class="core-tab-badge" *ngIf="tab.badge" aria-hidden="true">{{ tab.badge }}</ion-badge>
            <span class="sr-only">{{ tab.title | translate }}</span>
            <span *ngIf="tab.badge && tab.badgeA11yText" class="sr-only">
                {{ tab.badgeA11yText | translate: {$a : tab.badge } }}
            </span>
        </ion-tab-button>

        <ion-tab-button (keydown)="tabAction.keyDown(morePageName, $event)" (keyup)="tabAction.keyUp(morePageName, $event)"
            [hidden]="!loaded" [tab]="morePageName" layout="label-hide" [tabindex]="selectedTab === morePageName ? 0 : -1"
            [attr.aria-controls]="morePageName">
            <ion-icon class="core-tab-icon" name="ellipsis-horizontal" aria-hidden="true" />
            <ion-label aria-hidden="true">{{ 'core.more' | translate }}</ion-label>
            <span class="sr-only">{{ 'core.more' | translate }}</span>
            <ion-icon *ngIf="moreBadge" class="core-tab-badge" name="fas-circle" aria-hidden="true" />
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>
<div class="core-network-message" [hidden]="!showTabs">
    <div class="core-online-message">
        {{ "core.youreonline" | translate }}
    </div>
    <div class="core-offline-message">
        {{ "core.youreoffline" | translate }}
    </div>
</div>
