<template>
  <div class="relative w-full md:max-w-md">
    <div class="flex flex-row gap-2 items-center justify-center">
      <InformationCircleIcon class="text-gray-500 h-5 w-5" />
      <p class="text-xl font-medium">Zeit Format für Erinnerung und Intervall</p>
    </div>
    <br />
    <table class="min-w-full text-sm border border-gray-200 rounded">
      <tbody>
        <tr>
          <td class="px-3 py-2 font-mono text-gray-700 border-b border-gray-100">&lt;zahl&gt;-(d|m|y)</td>
          <td class="px-3 py-2 text-gray-600 border-b border-gray-100">
            Ein Intervall, z.B. <span class="font-mono">7-d</span> für alle 7 Tage,
            <span class="font-mono">1-m</span> für jeden Monat.
          </td>
        </tr>
        <tr>
          <td class="px-3 py-2 font-mono text-gray-700 border-b border-gray-100">DD/MM</td>
          <td class="px-3 py-2 text-gray-600 border-b border-gray-100">
            Ein bestimmtes Datum, z.B. <span class="font-mono">15/06</span> für den 15. Juni.
          </td>
        </tr>
        <tr>
          <td class="px-3 py-2 font-mono text-gray-700">DD/*</td>
          <td class="px-3 py-2 text-gray-600">
            Ein Tag jeden Monats, z.B. <span class="font-mono">01/*</span> für den ersten Tag jedes Monats.
          </td>
        </tr>
      </tbody>
    </table>
    <p>Im Fall von Erinnerungen wird das Format als zeitliche Angabe vor einem Datum verwendet.</p>
    <br />

    <div class="flex flex-row justify-end">
      <div class="flex flex-row gap-4 py-2">
        <button primary-outline @click="closeModal">schließen</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
</script>

<script lang="ts">
export default defineComponent({
  methods: {
    ...mapActions(useModalStore, ["closeModal"]),
  },
});
</script>
