<ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement" [class.tabshidden]="hidden">
    <ion-tab-bar slot="bottom" [hidden]="hidden">
        <ion-spinner *ngIf="!loaded"></ion-spinner>

        <ion-tab-button tab="redirect" [disabled]="true" [hidden]="true"></ion-tab-button>
        <!-- @todo: [root]="redirectPage" [rootParams]="redirectParams" -->

        <ion-tab-button (ionTabButtonClick)="tabClicked($event, tab.page)" [hidden]="!loaded && tab.hide" *ngFor="let tab of tabs"
            [tab]="tab.page" [disabled]="tab.hide" layout="label-hide"  class="{{tab.class}}">
            <ion-icon [name]="tab.icon"></ion-icon>
            <ion-label>{{ tab.title | translate }}</ion-label>
            <ion-badge *ngIf="tab.badge">{{ tab.badge }}</ion-badge>
        </ion-tab-button>

        <ion-tab-button (ionTabButtonClick)="tabClicked($event, 'more')" [hidden]="!loaded" tab="more" layout="label-hide">
            <ion-icon name="fa-bars"></ion-icon>
            <ion-label>{{ 'core.more' | translate }}</ion-label>
        </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>
