<template>
  <modal
    :hide-header="true"
    :small="true">
    <modal-input
      :value="localNote.text"
      placeholder="Notiz erfassen"
      data-cy="bookmark-note"
      @input="localNote.text = $event"
    />
    <div slot="footer">
      <a
        class="button button--primary"
        data-cy="modal-save-button"
        @click="$emit('save', localNote)">Speichern</a>
      <a
        class="button"
        @click="$emit('hide')">Abbrechen</a>
    </div>

  </modal>
</template>

<script>
  import Modal from '@/components/Modal';
  import ModalInput from '@/components/ModalInput';

  export default {
    props: ['note'],

    components: {
      Modal,
      ModalInput
    },

    data() {
      return {
        localNote: Object.assign({},
          {
            ...this.note
          }
        )
      };
    }
  };
</script>
