<script setup>
import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "college_group_6",
    href: "/college-group/life",
    disabled: false,
  },
  {
    title: "一日學徒",
    disabled: true,
  },
]);

const categoryList = reactive([
  {
    title: "關於一日學徒",
    path: "/college-group/life/apprentice/about",
  },
  // {
  //   title: "學徒選課資訊",
  //   path: "/college-group/life/apprentice/course",
  // },
  // {
  //   title: "最新訊息",
  //   path: "/college-group/life/apprentice/news",
  // },
  {
    title: "聯絡我們",
    path: "/college-group/life/apprentice/contact",
  },
  {
    title: "FAQ",
    path: "/college-group/life/apprentice/faq",
  },
  {
    title: "服務條款",
    path: "/college-group/life/apprentice/terms",
  },
]);
</script>

<template>
  <v-breadcrumbs :items="breadcrumbs" divider="/" class="mt-10 p-0">
    <template v-slot:title="{ item }">
      {{ t(item.title) }}
    </template>
  </v-breadcrumbs>

  <h2 class="title">一日學徒</h2>

  <v-row class="apprentice-content">
    <v-col md="2" cols="12" class="px-0">
      <ul class="category-list">
        <li v-for="(item, index) in categoryList" :key="index" class="mx-3">
          <router-link :to="item.path">
            {{ item.title }}
          </router-link>
        </li>
      </ul>
    </v-col>
    <v-col md="10" cols="12">
      <router-view></router-view>
    </v-col>
  </v-row>
</template>

<style lang="scss">
.apprentice-content {
  p,
  .sub-title {
    line-height: 1.875em;
    letter-spacing: 0.0625em;
  }
  .sub-title {
    margin-bottom: 1.875em;
    font-size: 1.25em;
    font-weight: 500;
  }
}
</style>
