<script setup lang="ts">
import * as log from "loglevel";
import { onMounted } from "vue";
import { useRoute } from "vue-router";

log.debug("CompetenceParentPage created");

const props = defineProps<{
  courseSlug: string;
}>();

const route = useRoute();

function routeInOverview() {
  return route.path.endsWith("/competence");
}

function routeInCompetenceCertificate() {
  return route.path.includes("/certificate");
}

function routeInPerformanceCriteria() {
  return route.path.endsWith("/criteria");
}

function routeInActionCompetences() {
  return route.path.endsWith("/competences");
}

onMounted(async () => {
  log.debug("CompetenceParentPage mounted", props.courseSlug);
});
</script>

<template>
  <div class="bg-gray-200">
    <nav class="border-b bg-white px-4 lg:px-8">
      <ul class="flex flex-col lg:flex-row">
        <li
          class="border-t-2 border-t-transparent"
          :class="{ 'border-b-2 border-b-blue-900': routeInOverview() }"
        >
          <router-link :to="`/course/${courseSlug}/competence`" class="block py-3">
            {{ $t("a.Übersicht") }}
          </router-link>
        </li>
        <li
          class="border-t-2 border-t-transparent lg:ml-12"
          :class="{ 'border-b-2 border-b-blue-900': routeInCompetenceCertificate() }"
        >
          <router-link
            :to="`/course/${courseSlug}/competence/certificates`"
            class="block py-3"
          >
            {{ $t("a.Kompetenznachweise") }}
          </router-link>
        </li>
        <li
          class="border-t-2 border-t-transparent lg:ml-12"
          :class="{ 'border-b-2 border-b-blue-900': routeInPerformanceCriteria() }"
        >
          <router-link
            :to="`/course/${courseSlug}/competence/criteria`"
            class="block py-3"
          >
            {{ $t("a.Selbsteinschätzungen") }}
          </router-link>
        </li>

        <li
          class="border-t-2 border-t-transparent lg:ml-12"
          :class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
        >
          <router-link
            :to="`/course/${courseSlug}/competence/competences`"
            class="block py-3"
          >
            {{ $t("a.Handlungskompetenzen") }}
          </router-link>
        </li>

        <!-- Add similar logic for other `li` items as you expand the list -->
        <li class="ml-6 inline-block lg:ml-12"></li>
      </ul>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped></style>
