<template>
  <section>
    <base-modal @close="$parent.close()">
      <template #header-title>
        New branch
      </template>

      <template #content>
        <b-field>
          <template slot="label">
            <span class="card-label">Branch title</span>
          </template>

          <b-input v-model="title" placeholder="Give me name" required size="is-small" />
        </b-field>

        <b-field>
          <template slot="label">
            <span class="card-label">Branch description</span>
          </template>

          <ckeditor
            v-model="description"
            :editor="editor"
            :config="editorConfig"
            style="margin: 0.5rem 0 45px; height: 100px"
          />
        </b-field>

        <!-- <b-checkbox type="is-dark" size="is-small">Include in Report</b-checkbox> -->
      </template>

      <template #footer>
        <b-button size="is-small" type="is-dark" class="button" @click="saveModal">
          Save
        </b-button>
      </template>
    </base-modal>
  </section>
</template>

<script>
import BaseModal from '@/components/BaseModal.vue'
import editors from '@/utils/editors'

export default {
  components: {
    BaseModal
  },
  data() {
    return {
      title: '',
      description: '',
      editor: editors.ClassicEditor,
      editorConfig: {}
    }
  },
  methods: {
    saveModal() {
      this.$emit('save', { title: this.title, description: this.description })
      this.title = ''
      this.description = ''
    }
  }
}
</script>

<style lang="sass" scoped>
.card
  height: 10vh

.card-label
  font-size: $card-section-title-size
  font-weight: $card-section-title-weight
  color: $card-section-title-color

// .text-field {
//   font-size: $card-text-field-size
//   font-weight: $card-text-field-weight
//   color: $card-text-field-color
//   min-height: 40vh !important
// }
</style>
