<template>
  <div class="submissions-page">
    <h1 class="submissions-page__title">Auftrag 2 - Aufgabe Interview</h1>

    <student-submission class="submissions-page__submission"
                        v-for="(submission, index) in submissions"
                        :key="index"
                        :submission="submission"
    >
    </student-submission>
  </div>

</template>

<script>
  import StudentSubmission from '@/components/StudentSubmission';

  export default {
    components: {
      StudentSubmission
    },

    data() {
      return {
        submissions: [
          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
          {name: 'Corinne Stalder', text: 'interview-LG.pdf'},
          {name: 'Hans Muster', text: 'Äusserlich erkennbare Schäden bitten wir sofort bei Lieferung…'},
          {name: 'Max Steiner', text: 'Als Kommentar wird eine meinungsbildende und… '},
          {name: 'Corinne Stalder', text: 'interview-LG.pdf'}
        ]
      }
    }
  }
</script>

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

  .submissions-page {
    /*grid-column: span 2;*/
    width: 800px;
    /*padding-left: 150px;*/

    &__title {
      font-size: toRem(35px);
    }

    &__submission:first-of-type {
      border-top: 1px solid $color-grey;
    }
  }
</style>
