<template>
  <modal :hide-header="false" :small="true">
    <template #header>
      <h4>{{ type }} bearbeiten</h4>
    </template>

    <modal-input :value="name" :placeholder="placeholder" data-cy="edit-name-input" @input="$emit('input', $event)" />
    <template #footer>
      <div slot="footer">
        <a class="button button--primary" data-cy="modal-save-button" @click="$emit('save')">Speichern</a>
        <a class="button" @click="$emit('cancel')">Abbrechen</a>
      </div>
    </template>
  </modal>
</template>

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

export default {
  props: {
    name: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: 'Namen bearbeiten',
    },
  },
  components: {
    Modal,
    ModalInput,
  },
};
</script>
