<script setup lang="ts">
// inspiration https://vuejs.org/examples/#modal
import {Circle} from '@/services/circle';

const props = defineProps<{
  circle: Circle,
  show: boolean
}>()

const emits = defineEmits(['closemodal'])

</script>

<template>
  <Transition mode="in-out">
    <div
      v-if="show"
      class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
      <button
        type="button"
        class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
        @click="$emit('closemodal')"
      >
        <it-icon-close></it-icon-close>
      </button>


      <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>

      <p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>

      <div class="mt-8 p-4 border border-gray-500">
        <h3>Du wirst in der Lage sein, ... </h3>

        <ul class="mt-4">
          <li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
            <it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
            <div class="mt-4">{{ goal.value }}</div>
          </li>
        </ul>
      </div>

      <h3 class="mt-16">
        Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
      </h3>

      <ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
        <li
          v-for="jobSituation in circle.job_situations"
          :key="jobSituation.id"
          class="job-situation border border-gray-500 p-4 text-xl flex items-center"
        >
          {{jobSituation.value}}
        </li>
      </ul>

    </div>
  </Transition>
</template>

<style scoped>
</style>
