<template>
  <modal class="confirm-dialog" :small="true">
    <template #header>
      <h3 class="confirm-dialog__heading">
        {{ title }}
      </h3>
    </template>
    <p class="confirm-dialog__content">
      {{ message }}
    </p>
    <template #footer>
      <div>
        <a class="button button--primary" data-cy="modal-save-button" @click="confirm"> Bestätigen </a>
        <a class="button" data-cy="modal-cancel-button" @click="cancel"> Abbrechen </a>
      </div>
    </template>
  </modal>
</template>

<script>
import Modal from '@/components/Modal';

export default {
  components: {
    Modal,
  },

  computed: {
    title() {
      const { payload } = this.$modal.state;
      if (payload && payload.title) {
        return payload.title;
      }
      return 'Bestätigung';
    },
    message() {
      const { payload } = this.$modal.state;
      if (payload && payload.message) {
        return payload.message;
      }
      return 'Wollen Sie diesen Eintrag wirklich löschen?';
    },
  },

  methods: {
    confirm() {
      this.$modal.confirm();
    },
    cancel() {
      this.$modal.cancel();
    },
  },
};
</script>

<style scoped lang="scss">
@import '~styles/helpers';

.confirm-dialog {
  &__heading {
    @include modal-heading;
  }

  &__content {
    display: flex;
    flex-direction: column;
    padding: $medium-spacing 0;
  }
}
</style>
