<script setup>
import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n";
import Navbar from "@/components/Navbar.vue";
import CoursesTutorial from "@/components/CoursesTutorial.vue";

const { t } = useI18n();

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.create_course",
    disabled: false,
    href: "/setup-courses",
  },
  {
    title: "home.title_5",
    disabled: true,
  },
]);
</script>

<template>
  <Navbar />

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

  <CoursesTutorial />
</template>

<style lang="scss" scoped>
.breadcrumbs-item {
  padding: 1.875em 0 1.875em 16vw;
  @media (max-width: 1800px) {
    padding: 1.875em 0 1.875em 5vw;
  }
}
</style>
