<template>
  <modal
    :hide-header="false"
    :small="true">
    <h4 slot="header">{{ type }} bearbeiten</h4>
    <modal-input
      :value="name"
      placeholder="Klassenname"
      data-cy="edit-name-input"
      @input="$emit('input', $event)"
    />
    <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>

  </modal>
</template>

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

  export default {
    props: {
      name: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: ''
      }
    },
    components: {
      Modal,
      ModalInput
    },

  };
</script>
