<template>
  <modal
    class="confirm-dialog"
    :small="true"
  >
    <template #header>
      <h3 class="confirm-dialog__heading">
        {{ title }}
      </h3>
    </template>
    <p class="confirm-dialog__content">
      Wollen Sie diesen Eintrag wirklich löschen?
    </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';
      },
    },

    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>
