<template>
  <div class="student-entry">
    <p v-html="value.task_text"></p>
    <textarea class="student-entry__input" placeholder="Text schreiben"></textarea>
    <div class="student-entry__dropzone-dummy">drag & drop | Dokument wählen</div>
    <button class="student-entry__submit">Ergebnis teilen</button>
  </div>
</template>

<script>
  import vue2Dropzone from 'vue2-dropzone'
  import 'vue2-dropzone/dist/vue2Dropzone.min.css'

  export default {
    props: ['value'],

    components: {
      vueDropzone: vue2Dropzone
    },

    data() {
      return {
        dropzoneOptions: {
          url: 'https://httpbin.org/post',
          thumbnailWidth: 100,
          maxFilesize: 0.5,
          language: {
            dictDefaultMessage: 'Halo Dropzone'
          }
        }
      }
    }
  }
</script>

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

  .student-entry {
    margin-bottom: 2em;

    &__input {
      display: block;
      width: 100%;
      border-radius: 3px;
      border: 1px solid #DBDBDB;
      padding: 13px;
      box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
      box-sizing: border-box;
      line-height: 1.5;
      margin-bottom: 12px;
    }

    &__dropzone-dummy {
      padding: 15px;
      border: 1px dashed #C5C5C5;
      margin-bottom: 12px;
      border-radius: 3px;
    }

    &__submit {
      background: transparent;
      border: 2px solid $color-brand;
      padding: 5px 15px;
      border-radius: 3px;
    }
  }
</style>
