<template>
  <div class="final-submission">
    <div v-if="submission.text" class="final-submission__text">
      {{submission.text}}
    </div>
    <document-block
      v-if="submission.document"
      :value="{url: submission.document}"
    ></document-block>
    <div class="final-submission__explanation">
      <info-icon class="final-submission__explanation-icon"></info-icon>
      <span class="final-submission__explanation-text">Das Ergebnis wurde mit der Lehrperson geteilt</span>
    </div>
  </div>
</template>

<script>
  import InfoIcon from '@/components/icons/InfoIcon';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';

  export default {
    props: ['submission'],

    components: {
      InfoIcon,
      DocumentBlock,
    }
  }
</script>

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

  .final-submission {
    &__text {
      background-color: $color-white;
      @include input-box-shadow;
      border-radius: $input-border-radius;
      padding: 15px;
      font-size: toRem(17px);
      font-family: $sans-serif-font-family;
      margin-bottom: 20px;
      font-weight: 500;

      overflow-wrap: break-word;
      word-wrap: break-word;
      hyphens: auto;
      word-break: break-word;
    }

    &__explanation {
      display: flex;
      align-items: center;
    }
    &__explanation-icon {
      width: 40px;
      height: 40px;
      fill: $color-brand;
      margin-right: 8px;
    }
    &__explanation-text {
      color: $color-brand;
      font-family: $sans-serif-font-family;
      font-weight: 500;
    }
  }
</style>
