<template lang="pug">
  transition(:duration="400")
    .modal(v-show='isShown', v-cloak)
      transition(name='modal-background')
        .modal-background(v-show='isShown')
      .modal-container
        transition(name='modal-content')
          .modal-content(v-show='isShown')
            header.is-orange {{ $t('modal.discardpagetitle') }}
            section
              span(v-if='mode === "create"') {{ $t('modal.discardpagecreate') }}
              span(v-else) {{ $t('modal.discardpageedit') }}
            footer
              a.button.is-grey.is-outlined(v-on:click='stay') {{ $t('modal.discardpagestay') }}
              a.button.is-orange(v-on:click='discard') {{ $t('modal.discard') }}
</template>

<script>
  export default {
    name: 'modal-discard-page',
    props: ['mode', 'currentPath'],
    data () {
      return {}
    },
    computed: {
      isShown () {
        return this.$store.state.modalDiscardPage.shown
      }
    },
    methods: {
      stay: function () {
        this.$store.dispatch('modalDiscardPage/close')
      },
      discard: function () {
        if(this.mode === 'create') {
          window.location.assign('/')
        } else {
          window.location.assign('/' + this.currentPath)
        }
      }
    }
  }
</script>