<template>
  <div class="objective-form">
    <modal-input
      :value="objective.text"
      class="objective-form__input"
      placeholder="Lernziel erfassen..."
      @input="$emit('input', $event)"
    />
    <a
      class="icon-button"
      @click="$emit('delete')">
      <trash-icon class="icon-button__icon"/>
    </a>
  </div>

</template>

<script>
  import TrashIcon from '@/components/icons/TrashIcon';
  import ModalInput from '@/components/ModalInput';

  export default {
    props: ['objective'],

    components: {
      ModalInput,
      TrashIcon
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .objective-form {
    display: grid;
    grid-template-columns: 1fr 50px;
    margin-bottom: 10px;

    &__input {
      width: $modal-input-width;
    }
  }
</style>
