<template>
  <div class="homepage-container">
    <HomeHeroModule />

    <TemplateContainer size="l">
      <FlashInfosCustomsWithData class="blocks-container" />

      <HomeNewsListing class="blocks-container" />

      <HomeEventsListing class="blocks-container" />

      <ServiceDeskWithData class="blocks-container" />

      <HomeSocialBlock />
    </TemplateContainer>
  </div>
</template>

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

import HomeHeroModule from '../components/home/HomeHeroModule'
import FlashInfosCustoms from '../components/home/FlashInfosCustoms'
import HomeNewsListing from '../components/home/HomeNewsListing'
import HomeServiceDesk from '../components/home/HomeServiceDesk'
import HomeSocialBlock from '../components/home/HomeSocialBlock'
import HomeEventsListing from '../components/home/HomeEventsListing'

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

import { fetchFlashInfos, fetchServiceDesk } from '../components/home/fetch'

export default {
  name: 'HomePage',
  $_i18nRootPath: 'customs.HOMEPAGE',
  components: {
    TemplateContainer,
    TwoColumnsLayout,
    HomeNewsListing,
    HomeHeroModule,
    ServiceDeskWithData: withFetch(HomeServiceDesk)(fetchServiceDesk),
    FlashInfosCustomsWithData: withFetch(FlashInfosCustoms)(fetchFlashInfos),
    HomeSocialBlock,
    HomeEventsListing
  },
  mounted() {
    this.$store.commit('setContentMainsActions', {
      add: ['news', 'events', 'infos_flash']
    })
  }
}
</script>

<style lang="scss">
.homepage-container {
  .hero-container {
    padding-top: 100px !important;
  }

  .blocks-container {
    margin-top: var(--spacing-xl);
  }
}
</style>
