<!--
Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
Copyright (C) 2024 HTWKalender support@htwkalender.de

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<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 flex-shrink-0"
    severity="help"
    rounded
    outlined
    size="large"
    aria-label="Help"
    @click="helpVisible = true"
  />
  <Dialog
    v-model:visible="helpVisible"
    class="w-full md:w-auto"
    :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>
