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

    <template #content>
      <b-field>
        <template slot="label">
          <span class="card-label"
            >Note title<span style="font-weight: 300"> (optional)</span></span
          >
        </template>

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

      <b-field>
        <template slot="label">
          <span class="card-label">Note</span>
        </template>
        <ckeditor
          v-model="message"
          :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"
        style="margin-bottom: 0"
        @click="saveModal"
      >
        Save
      </b-button>
    </template>
  </base-modal>
</template>

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

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

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

.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
  height: 150px
</style>
