<template>
  <div class="assignment-form">
    <input
      :value="value.title"
      class="assignment-form__title skillbox-input"
      placeholder="Aufgabentitel"
      @input="$emit('assignment-change-title', $event.target.value, index)"
    >
    <textarea
      :value="value.assignment"
      class="assignment-form__exercise-text skillbox-textarea"
      placeholder="Aufgabe erfassen..."
      @input="$emit('assignment-change-assignment', $event.target.value, index)"
    />
    <info-icon class="assignment-form__help-icon help-text__icon"/>
    <p class="assignment-form__help-description help-text__description">
      Ein Eingabefeld für die Antwort wird automatisch hinzugefügt.
    </p>
  </div>
</template>

<script>
  import InfoIcon from '@/components/icons/InfoIcon';

  export default {
    props: ['value', 'index'],

    components: {
      InfoIcon
    }
  };
</script>
<style scoped lang="scss">
  @import "~styles/helpers";

  .assignment-form {
    display: grid;
    grid-auto-rows: auto;
    grid-row-gap: 13px;
    grid-template-columns: 40px 1fr;
    grid-column-gap: 16px;
    align-items: center;

    &__title {
      width: $modal-input-width;
      grid-column: span 2;
    }

    &__exercise-text {
      width: $modal-input-width;
      grid-column: span 2;
    }

    &__help-icon {
      width: 40px;
      height: 40px;
    }

    &__help-description {
    }
  }
</style>
