<script setup lang="ts">
import type { FeedbackRequest } from "@/services/selfEvaluationFeedback";
import FeedbackProvided from "@/components/selfEvaluationFeedback/FeedbackProvided.vue";
import ItButton from "@/components/ui/ItButton.vue";

defineProps<{
  feedback: FeedbackRequest;
}>();

const emit = defineEmits(["release"]);
</script>

<template>
  <div class="mb-12 mt-12 space-y-5 border-2 border-gray-200 p-7">
    <div class="text text-bold text-xl">{{ $t("a.Fremdeinschätzung freigeben") }}</div>
    <template v-if="!feedback.feedback_submitted">
      <div>
        {{
          $t(
            "a.Überprüfe deine Eingaben unten und gib anschliessend deine Fremdeinschätzung für FEEDBACK_REQUESTER frei",
            {
              FEEDBACK_REQUESTER: feedback.feedback_requester_user.first_name,
            }
          )
        }}
      </div>
      <ItButton variant="primary" size="large" @click="emit('release')">
        {{ $t("a.Fremdeinschätzung freigeben") }}
      </ItButton>
    </template>
    <div v-else class="flex space-x-2 bg-green-200 p-4">
      <it-icon-check class="it-icon h-6 w-6 text-green-700" />
      <div>
        {{ $t("a.Du hast deine Fremdeinschätzung freigegeben") }}
      </div>
    </div>
  </div>
  <FeedbackProvided :feedback="feedback" />
</template>

<style scoped></style>
