<template>
  <div class="job-space-page-container">
    <Banner
      :static-data="fetchedData"
      :add="['job_spaces', 'job_pages_categories', 'job_pages', 'job_offers']"
      image-key="image"
      introduction-key="description"
    />

    <TemplateContainer size="l">
      <TwoColumnsLayout columns-template="1fr 3fr" mobile-direction="reverse">
        <template #sidebar>
          <SpaceKeyContacts
            v-if="fetchedData.key_contacts"
            :contacts="fetchedData.key_contacts.data"
          />

          <SpaceNewcomersListing
            v-if="fetchedData.showNewcomers && fetchedData.newcomersData"
            :newcomers="fetchedData.newcomersData.data"
          />

          <SpaceDocumentsListing
            v-if="fetchedData.documents"
            :documents="fetchedData.documents.data"
          />

          <SpaceToolsListing
            v-if="fetchedData.applications"
            :tools="fetchedData.applications.data"
          />

          <SpaceVideo v-if="fetchedData.video" :video="fetchedData.video" />
        </template>

        <template #main>
          <SpaceSliderNews v-if="fetchedData.news" :news="fetchedData.news" />

          <SpaceGroupWithTabs
            v-if="hasJobsGroupingPages"
            :job-pages-categories="fetchedData.job_pages_categories"
            class="mt-xl"
          />

          <SpaceText
            v-if="fetchedData.free_text"
            :text="fetchedData.free_text"
            class="mt-xl"
          />

          <SpaceJobsListing
            v-if="fetchedData.showJobs && fetchedData.jobsData"
            :jobs="fetchedData.jobsData.data"
          />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

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

import SpaceDocumentsListing from '../../components/spaces/SpaceDocumentsListing'
import SpaceKeyContacts from '../../components/spaces/SpaceKeyContacts'
import SpaceNewcomersListing from '../../components/spaces/SpaceNewcomersListing'
import SpaceToolsListing from '../../components/spaces/SpaceToolsListing'
import SpaceVideo from '../../components/spaces/SpaceVideo'
import SpaceText from '../../components/spaces/SpaceText'
import SpaceSliderNews from '../../components/spaces/SpaceSliderNews'
import SpaceGroupWithTabs from '../../components/spaces/SpaceGroupWithTabs'
import SpaceJobsListing from '../../components/spaces/SpaceJobsListing'

export default {
  name: 'JobSpacePage',
  $_i18nRootPath: 'customs.SPACES',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    Block,
    SpaceDocumentsListing,
    SpaceKeyContacts,
    SpaceNewcomersListing,
    SpaceToolsListing,
    SpaceVideo,
    SpaceText,
    SpaceSliderNews,
    SpaceGroupWithTabs,
    SpaceJobsListing
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      hasJobsGroupingPages: this.fetchedData.job_pages_categories.count > 0
    }
  }
}
</script>
