<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { useCurrentCourseSession } from "@/composables";
import { onMounted } from "vue";

const route = useRoute();
const router = useRouter();
const courseSession = useCurrentCourseSession();

// if just a course session member -> hide navigation
// and automatically redirect to mentorsAndParticipants
const isMentoring = courseSession.value.actions.includes(
  "learning-mentor::guide-members"
);

onMounted(() => {
  if (!isMentoring) {
    router.push({ name: "mentorsAndParticipants" });
  }
});
</script>

<template>
  <div class="bg-gray-200">
    <nav
      v-if="isMentoring"
      class="border-b bg-white px-4 lg:px-8"
      data-cy="lm-main-navigation"
    >
      <ul class="flex flex-col lg:flex-row">
        <li
          class="border-t-2 border-t-transparent"
          :class="{
            'border-b-2 border-b-blue-900': route.name
              ?.toString()
              .startsWith('learningMentor'),
          }"
        >
          <router-link
            data-cy="lm-overview-navigation-link"
            :to="{ name: 'learningMentorOverview' }"
            class="block py-3"
          >
            {{ $t("a.Übersicht") }}
          </router-link>
        </li>

        <li
          data-cy="lm-mentees-navigation-link"
          class="border-t-2 border-t-transparent lg:ml-12"
          :class="{
            'border-b-2 border-b-blue-900': route.name === 'mentorsAndParticipants',
          }"
        >
          <router-link :to="{ name: 'mentorsAndParticipants' }" class="block py-3">
            {{ $t("a.Personen") }}
          </router-link>
        </li>
      </ul>
    </nav>
    <main class="container-large">
      <router-view></router-view>
    </main>
  </div>
</template>
