<script setup lang="ts">
import type { LearningUnit, LearningUnitPerformanceCriteria } from "@/types";

defineProps<{
  learningUnit: LearningUnit;
  criteria: LearningUnitPerformanceCriteria[];
  showEditLink: boolean;
}>();
</script>

<template>
  <div
    v-for="(completion, index) in criteria"
    :key="completion.id"
    class="flex flex-col space-y-4 border-t border-gray-400 py-8"
  >
    <div class="flex justify-between">
      <b>{{ completion.title }}</b>
      <router-link
        v-if="showEditLink"
        :to="`${learningUnit.evaluate_url}?step=${index}`"
        class="underline"
      >
        {{ $t("a.Bearbeiten") }}
      </router-link>
    </div>
    <div
      v-if="completion.completion_status == 'SUCCESS'"
      class="flex flex-row items-center space-x-2"
    >
      <it-icon-smiley-happy class="h-6 w-6" />
      <span>{{ $t("selfEvaluation.yes") }}</span>
    </div>
    <div
      v-else-if="completion.completion_status == 'FAIL'"
      class="flex flex-row items-center space-x-2"
    >
      <it-icon-smiley-thinking class="h-6 w-6" />
      <span>{{ $t("selfEvaluation.no") }}</span>
    </div>
    <div
      v-else-if="completion.completion_status == 'UNKNOWN'"
      class="flex flex-row items-center space-x-2"
    >
      <it-icon-smiley-neutral class="h-6 w-6" />
      <span>{{ $t("a.Nicht bewertet") }}</span>
    </div>
  </div>
</template>

<style scoped></style>
