<template>
  <v-row justify="center">
    <v-dialog v-model="show" max-width="250">
      <v-card>
        <DialogHeading title="Exit Editor" @hide="show = false" />

        <v-card-text class="my-0 pb-0 pt-2">
          Abandon changes and return to the catalog list?
        </v-card-text>

        <v-card-actions>
          <v-spacer/>
          <v-btn
            small
            class="mb-2"
            @click="show = false">Cancel</v-btn>
          <v-btn
            color="primary"
            class="black--text ml-4 mb-2"
            small
            href="/catalogs">Exit</v-btn>
          <v-spacer/>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
import DialogHeading from './DialogHeading'

// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
export default {
  components: {
    DialogHeading,
  },
  props: {
    value: Boolean,
  },
  data: () => ({
  }),
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
  },
}
</script>

<style>
</style>
