<script setup lang="ts">
import { computed, Ref, ref } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });

const helpVisible: Ref<boolean> = ref(false);

const placeholders = computed(() => [
  {
    placeholder: "%t",
    description: t("moduleTemplateDialog.eventTyp"),
    examples:
      "V = " +
      t("moduleTemplateDialog.lecture") +
      ", S = " +
      t("moduleTemplateDialog.seminar") +
      ", P = " +
      t("moduleTemplateDialog.exam"),
  },
  {
    placeholder: "%p",
    description: t("moduleTemplateDialog.mandatory"),
    examples:
      "w = " +
      t("moduleTemplateDialog.optional") +
      ", p = " +
      t("moduleTemplateDialog.mandatory"),
  },
]);
</script>

<template>
  <Button
    icon="pi pi-info"
    class="m-2 small-button"
    severity="help"
    rounded
    outlined
    size="large"
    aria-label="Help"
    @click="helpVisible = true"
  />
  <Dialog
    v-model:visible="helpVisible"
    :header="$t('moduleTemplateDialog.moduleConfiguration')"
  >
    <p>
      {{ t("moduleTemplateDialog.explanationOne") }}
    </p>
    <p>{{ t("moduleTemplateDialog.tableDescription") }}</p>
    <DataTable :value="placeholders">
      <Column
        field="placeholder"
        :header="$t('moduleTemplateDialog.placeholder')"
      ></Column>
      <Column
        field="description"
        :header="$t('moduleTemplateDialog.description')"
      ></Column>
      <Column
        field="examples"
        :header="$t('moduleTemplateDialog.examples')"
      ></Column>
    </DataTable>
    <p>
      {{ t("moduleTemplateDialog.explanationTwo") }}
    </p>
  </Dialog>
</template>

<style scoped></style>
