<template>
  <div class="content-block-title-input">
    <input placeholder="Titel für Inhaltsblock erfassen"
           class="content-block-title-input__inputfield skillbox-input"
           :class="{'skillbox-input--error': error}"
           :value="title"
           v-on:input="$emit('update-title', $event.target.value)">
    <div class="content-block-title-input__error" v-if="error">
      Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title', 'error']
  }
</script>

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

  .content-block-title-input {
    &__inputfield {
      width: $modal-input-width;
    }

    &__error {
      font-family: sans-serif;
      font-size: toRem(14px);
      color: $color-accent-3-dark;
      padding: 10px 0;
    }
  }
</style>
