<template>
  <modal
    :hide-header="true"
    :small="true"
  >
    <modal-input
      :value="localNote.text"
      placeholder="Notiz erfassen"
      data-cy="bookmark-note"
      @input="localNote.text = $event"
    />
    <template #footer>
      <div>
        <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>
    </template>
  </modal>
</template>

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

export default {
  props: ['note'],

  components: {
    Modal,
    ModalInput,
  },

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