<template>
  <div class="home-page-container">
    <HeroModule class="mb-xxl" />

    <TemplateContainer size="l">
      <Direct />

      <NewsListingWithData />

      <ProjectNewsWithData />

      <ProjectsListingWithData />
    </TemplateContainer>

    <Container
      :border="false"
      :background="true"
      :background-color="$_theme('colorGrey100')"
      class="mt-xxl"
    >
      <TemplateContainer size="l" class="newcomers-documents-container">
        <NewcomersWithData />

        <LastDocuments />
      </TemplateContainer>
    </Container>
  </div>
</template>

<script>
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import { Container } from 'inside-collection/components'

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

import HeroModule from '../components/home/HeroModule'
import Direct from '../components/home/Direct'
import NewsListing from '../components/home/NewsListing'
import ProjectNews from '../components/home/ProjectNewsListing'
import ProjectsListing from '../components/home/ProjectsListing'
import Newcomers from '../components/home/Newcomers'
import LastDocuments from '../components/home/LastDocuments'

import {
  fetchNewsListing,
  fetchProjectNews,
  fetchNewcomers,
  fetchProjects
} from '../components/home/fetch'

export default {
  name: 'HomePage',
  components: {
    TemplateContainer,
    Container,
    HeroModule,
    Direct,
    NewsListingWithData: withFetch(NewsListing)(fetchNewsListing),
    ProjectNewsWithData: withFetch(ProjectNews)(fetchProjectNews),
    ProjectsListingWithData: withFetch(ProjectsListing)(fetchProjects),
    NewcomersWithData: withFetch(Newcomers)(fetchNewcomers),
    LastDocuments
  },
  mounted() {
    this.$store.commit('setContentMainsActions', {
      add: ['news', 'events']
    })
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.home-page-container {
  .ds-container-container {
    .newcomers-documents-container {
      display: flex;
      justify-content: space-between;

      @include tablet {
        flex-direction: column;
      }

      transition {
        @include desktop-only {
          width: 45%;
        }
      }
    }
  }
}
</style>
