<template>
  <div class="experience-page">
    <Banner :herited-data="fetchedData" />

    <TemplateContainer size="l">
      <ExperienceHeaderInfos :herited-data="fetchedData" />

      <TwoColumnsLayout :separator="false">
        <template #sidebar>
          <ExperienceReferents
            v-if="fetchedData[0].referents.data.length"
            :referents="fetchedData[0].referents.data"
          />

          <ExperienceTitleText
            v-if="fetchedData[0].partners"
            :data="fetchedData[0].partners"
            :title="$_tr('PARTNERS.title')"
          />

          <ExperienceTitleText
            v-if="fetchedData[0].objectives"
            :data="fetchedData[0].objectives"
            :title="$_tr('OBJECTIVES.title')"
          />

          <ExperienceDocumentsListing
            v-if="fetchedData[0].content"
            :content="fetchedData[0].content"
          />
        </template>

        <template #main>
          <ExperienceMainInfosGroup :heritedData="fetchedData[0]" />
        </template>
      </TwoColumnsLayout>

      <ExperienceButtonBack />

      <ExperienceCTAButtons />
    </TemplateContainer>
  </div>
</template>

<script>
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'

import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

import Banner from '../../components/experiences/ExperienceHeader'
import ExperienceHeaderInfos from '../../components/experiences/ExperienceHeaderInfos'
import ExperienceDocumentsListing from '../../components/experiences/ExperienceDocumentsListing'
import ExperienceReferents from '../../components/experiences/ExperienceReferents'
import ExperienceTitleText from '../../components/experiences/ExperienceTitleText'
import ExperienceMainInfosGroup from '../../components/experiences/ExperienceMainInfosGroup'
import ExperienceButtonBack from '../../components/experiences/ExperienceButtonBack'
import ExperienceCTAButtons from '../../components/experiences/ExperienceCTAButtons'

export default {
  name: 'ExperiencePage',
  $_i18nRootPath: 'customs.EXPERIENCE_PAGE',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    ParagraphListing,
    ExperienceHeaderInfos,
    ExperienceDocumentsListing,
    ExperienceReferents,
    ExperienceTitleText,
    ExperienceMainInfosGroup,
    ExperienceButtonBack,
    ExperienceCTAButtons
  },
  props: {
    fetchedData: {
      type: Array
    }
  }
}
</script>
