<template>
  <v-container>
    <v-row>
      <v-col cols="9">
        <h1 class="primary--text">{{ reportCardStructure.title }}</h1>
        <v-divider />
        <br />

        <div
          v-for="section in reportCardStructure.sections"
          :key="section.id"
          class="section-container"
        >
          <ReportCardSection :section-description="section" />
          <v-divider />
        </div>
      </v-col>
      <v-col cols="3">
        <Navigator :report-card-structure="reportCardStructure" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Navigator from '~/components/report_cards/Navigator.vue'
import ReportCardSection from '~/components/report_cards/shared/ReportCardSection.vue'

export default {
  components: {
    Navigator,
    ReportCardSection,
  },
  props: {
    reportCardStructure: {
      type: Object,
      default: () => {},
    },
  },
}
</script>

<style>
.section-container {
  padding: 10px 0;
  margin-bottom: 10px;
}
</style>