<ion-tabs>
    <ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown < 1">
        <ion-spinner *ngIf="!hideUntil"></ion-spinner>
        <ion-row *ngIf="hideUntil">
            <ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1">
                <ion-icon *ngIf="showPrevButton" name="fa-chevron-left"></ion-icon>
            </ion-col>
            <ion-col class="ion-no-padding" size="10">
                <ion-slides (ionSlideDidChange)="slideChanged()" [options]="slideOpts" [dir]="direction" role="tablist"
                    [attr.aria-label]="description" aria-hidden="false">
                    <ng-container *ngFor="let tab of tabs">
                        <ion-slide [hidden]="!hideUntil" [attr.aria-selected]="selected == tab.id" class="tab-slide"
                            [attr.aria-label]="tab.title | translate" role="tab" [attr.aria-controls]="tab.id" [id]="tab.id + '-tab'"
                            [tabindex]="selected == tab.id ? null : -1">

                            <ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" [tab]="tab.page" [layout]="layout"
                                class="{{tab.class}}">
                                <ion-icon *ngIf="tab.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-slide>
                    </ng-container>
                </ion-slides>
            </ion-col>
            <ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1">
                <ion-icon *ngIf="showNextButton" name="fa-chevron-right"></ion-icon>
            </ion-col>
        </ion-row>
    </ion-tab-bar>
</ion-tabs>
