<template>
  <div>
    <Banner
      :static-data="fetchedData"
      :add="['spaces_pages', 'spaces_pages_categories']"
      introductionKey="chapo"
    />

    <TemplateContainer size="l">
      <TwoColumnsLayout columns-template="2fr 5fr" mobile-direction="reverse">
        <template #sidebar>
          <SpacesKeyContacts :users="fetchedData.users.data" />
        </template>

        <template #main>
          <HrNewsWithData />

          <SpacesGroupWithTabs />
        </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 SpacesKeyContacts from '@inside-customs/components/spaces/SpacesKeyContacts'
import SpacesGroupWithTabs from '@inside-customs/components/spaces/SpacesGroupWithTabs'
import SpacesNews from '@inside-customs/components/spaces/SpacesNews'

import { withFetch } from 'inside-collection/hocs'

import { fetchHrNews } from '@inside-customs/fetch/spaces'

export default {
  name: 'SpacesPage',
  $_i18nRootPath: 'customs.SPACES',
  components: {
    Banner,
    TemplateContainer,
    TwoColumnsLayout,
    SpacesKeyContacts,
    SpacesGroupWithTabs,
    HrNewsWithData: withFetch(SpacesNews)(fetchHrNews)
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  }
}
</script>
