<script setup lang="ts">
import { useCSRFFetch } from "@/fetchHelpers";
import { getCockpitUrl } from "@/utils/utils";

const props = defineProps<{
  courseId: string;
  invitationId: string;
}>();

const { data, error } = useCSRFFetch(
  `/api/mentor/${props.courseId}/invitations/accept`,
  {
    onFetchError(ctx) {
      ctx.error = ctx.data;
      return ctx;
    },
  }
)
  .post({
    invitation_id: props.invitationId,
  })
  .json();
</script>

<template>
  <div class="flex-grow bg-gray-200">
    <div class="container-large">
      <header class="mb-8 mt-12">
        <h1 class="mb-8">{{ $t("a.Einladung") }}</h1>
      </header>
      <main>
        <div class="bg-white p-6">
          <template v-if="error">
            {{
              $t(
                "a.Die Einladung konnte nicht akzeptiert werden. Bitte melde dich beim Support."
              )
            }}
            <div>
              <a class="underline" href="mailto:help@vbv.ch">help@vbv.ch</a>
            </div>
            <div v-if="error.message" class="my-4">
              {{ $t("a.Fehlermeldung") }}: {{ error.message }}
            </div>
          </template>
          <template v-else>
            <i18next
              :translation="
                $t('a.Du hast die Einladung von {name} erfolgreich akzeptiert.')
              "
            >
              <template #name>
                <b>{{ data.user.first_name }} {{ data.user.last_name }}</b>
              </template>
            </i18next>
            <div class="mt-4">
              <a class="underline" :href="getCockpitUrl(data.course_slug)">
                {{ $t("a.Cockpit anschauen") }}
              </a>
            </div>
          </template>
        </div>
      </main>
    </div>
  </div>
</template>
