<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="400px">
      
      <v-card>
        <v-card-title>
          <span class="headline">Tambah Data Template</span>
        </v-card-title>
        <v-card-text class="pt-0">
          <v-container grid-list-md pa-0>
            <v-layout row wrap>
                
              <v-flex xs12 sm12 md12>
                <v-text-field v-model="template_name" label="Nama" hide-details required></v-text-field>
              </v-flex>
              
            </v-layout>
          </v-container>
          
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Tutup</v-btn>
          <v-btn color="blue darken-1" @click="save">Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<style scoped>

</style>
<style>

</style>

<script>
module.exports = {
    data () {
        return {
        }
      
    },

    computed : {
        template_name : {
          get () {
            return this.$store.state.template.new_template_name
          },
          set (v) {
            this.$store.commit('template/update_new_template_name', v)
          }
        },

        dialog : {
            get () {
                return this.$store.state.template.dialog_new
            },
            set (v) {
                this.$store.commit('template/update_dialog_new', v)
            }
        }
    },

    methods : {      
      save () {
        this.$store.dispatch('template/save')
      }
    },

    watch : {
      
    },

    mounted () {
      
    }
  }
</script>