<script setup lang="ts">
import { useRoute } from "vue-router";

const route = useRoute();
</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':
              route.name === 'mentorCockpitOverview' || route.name === 'mentorCockpit',
          }"
        >
          <router-link :to="{ name: 'mentorCockpitOverview' }" 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': route.name === 'mentorCockpitParticipants',
          }"
        >
          <router-link :to="{ name: 'mentorCockpitParticipants' }" class="block py-3">
            {{ $t("a.Teilnehmer") }}
          </router-link>
        </li>
      </ul>
    </nav>
    <main class="container-large">
      <router-view></router-view>
    </main>
  </div>
</template>
