<script setup lang="ts">
import WizardPage from "@/components/onboarding/WizardPage.vue";
import InfoBox from "@/components/onboarding/InfoBox.vue";
import { ref } from "vue";

// This page will probably not be reached with a course session already assigned.
// This is just a placeholder for the future.
const courseSessionName = ref("");
</script>

<template>
  <WizardPage :step="2">
    <template #content>
      <h2 class="my-10">{{ $t("a.An Durchführung teilnehmen") }}</h2>
      <template v-if="courseSessionName">
        <InfoBox color="text-green-500" icon="it-icon-check">
          <template #content>
            <p class="text-lg">
              {{
                $t(
                  "a.Super, nun ist alles bereit. Du bist der Durchführung «{course}» zugewiesen und kannst mit dem Lehrgang starten.",
                  { course: courseSessionName }
                )
              }}
            </p>
          </template>
        </InfoBox>
      </template>
      <template v-else>
        <InfoBox>
          <template #content>
            <p class="text-lg">
              {{ $t("a.Aktuell bist du leider keiner Durchführung zugewiesen.") }}
            </p>
          </template>
        </InfoBox>
        <p>
          <i18next
            :translation="
              $t(
                'a.Damit du mit diesem Lehrgang starten kannst, musst du einer Durchführung zugewiesen werden. Nimm dafür deinem üK-Verantwortlichen oder unserem {support} Kontakt auf.'
              )
            "
          >
            <template #support>
              <a class="underline" href="mailto:help@vbv.ch">Support</a>
            </template>
          </i18next>
        </p>
      </template>
    </template>
    <template #footer>
      <router-link
        :to="{ name: 'accountProfile' }"
        class="btn-secondary flex items-center"
      >
        <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
        {{ $t("general.back") }}
      </router-link>
      <router-link v-if="courseSessionName" to="/" class="btn-blue flex items-center">
        {{ $t("a.Jetzt mit Lehrgang starten") }}
        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
      </router-link>
    </template>
  </WizardPage>
</template>
