<script setup lang="ts">
import * as log from "loglevel";
import ItProgress from "@/components/ui/ItProgress.vue";

log.debug("ProfileView created");

const fakeData = {
  statusCount: {
    fail: 2,
    success: 9,
    unknown: 2
  }
}


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="flex flex-row items-center mb-12">
        <img class="w-44 h-44 rounded-full mr-8" 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-no-repeat pl-6 bg-[center_left_-4px]">{{ $t("messages.sendMessage") }}</p>
        </div>
      </header>
      <main>
        <div class="bg-white w-full mb-8">
          ich bin ein Lernpfad
        </div>
        <ul class="flex flex-row border-b-2 mb-5">
          <li class="mr-12 pb-3 relative top-px" :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>
        <div>
          <ul class="bg-white px-8 py-2">
            <li class="border-b border-grey-200 last:border-01 flex flex-row py-4">
              <h2 class="text-bold w-1/2">Weiterempfehlung für Neukunden generieren</h2>
              <div class="w-1/2">
                <ItProgress
                  :status-count="fakeData.statusCount">
                </ItProgress>
              </div>
            </li>
          </ul>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped></style>
