<template>
  <v-layout row justify-center>
    <v-dialog v-model="show" max-width="250">
      <v-card>
        <v-card-title>Delete Section</v-card-title>

        <v-card-text>
          Really delete section:
          <input v-model="name"/>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat @click="show = false">Cancel</v-btn>
          <v-btn color="primary" flat @click="show = false">OK</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
// https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs
export default {
  data: () => ({
  }),
  props: {
    value: Boolean,
    section: {
      type: Number,
      required: false
    }
  },
  computed: {
    show: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    },
    name: {
      get () {
        var sectionID = this.$store.getters.SELECTED_SECTION_ID
        var section = this.$store.getters.CAT_SECTION(sectionID)
        return section ? section.name : '(none)'
      }
    }
  }
}
</script>

<style>

</style>
