<script setup lang="ts">
import * as log from "loglevel";

log.debug("ProfileView created");

function setActiveClasses(isActive: boolean) {
  return isActive ? ["border-blue-900", "border-b-2"] : ["text-bg-900"];
}
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large">
      <nav class="py-4 pb-4">
        <router-link class="btn-text inline-flex items-center pl-0" :to="'/'">
          <it-icon-arrow-left />
          <span>{{ $t("general.back") }}</span>
        </router-link>
      </nav>
      <header class="mb-12 flex flex-row items-center">
        <img class="mr-8 h-44 w-44 rounded-full" src="https://picsum.photos/200" />
        <div>
          <h1 class="mb-2">Daniel Baumgartner</h1>
          <p class="mb-2">d.baumgartner@gmail.com</p>
          <p class="bg-message bg-[center_left_-4px] bg-no-repeat pl-6">
            {{ $t("messages.sendMessage") }}
          </p>
        </div>
      </header>
      <main>
        <div class="mb-8 w-full bg-white">ich bin ein Lernpfad</div>
        <ul class="mb-5 flex flex-row border-b-2">
          <li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
            <button>{{ $t("competences.competences") }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.transferTask", 2) }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.exam", 2) }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.certificate", 2) }}</button>
          </li>
        </ul>
      </main>
    </div>
  </div>
</template>

<style scoped></style>
