<template>
  <div class="w-full md:max-w-md">
    <div class="flex flex-col items-center">
      <p class="text-xl font-medium">Newsletter Mail-Versand Logs</p>
    </div>
    <br />

    <div class="h-96 overflow-y-scroll">
      <p v-for="entry in mailSourceMessages">
        {{ entry }}
      </p>
    </div>

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

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
</script>

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