<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon aria-hidden="true" :icon="videocam" />
          <ion-label>Trainings</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2" href="/tabs/tab2">
          <ion-icon aria-hidden="true" :icon="grid" />
          <ion-label>Course</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab3" href="/tabs/tab3">
          <ion-icon aria-hidden="true" :icon="time" />
          <ion-label>Schedule</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="profile" href="/tabs/tab4">
          <ion-icon aria-hidden="true" :icon="person" />
          <ion-label>Profile</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet, onIonViewWillEnter, useIonRouter } from '@ionic/vue';
import { ellipse, square, triangle, person, time, videocam, grid } from 'ionicons/icons';
import { isLogin } from '@/composable/settings';

const ionRouter = useIonRouter();

onIonViewWillEnter(async () => {
  console.log("tabs init ...")
})
</script>
