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

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

    <FlashNews class="mt-m mb-xl" />

    <TemplateContainer size="l">
      <TwoColumnsLayout :separator="false" mobile-direction="reverse">
        <template #sidebar>
          <CardImageListing
            v-if="!getTablet"
            :extra-filters="{ limit: 3, sort: 'published_at:asc' }"
            class="mb-xl"
          />

          <HomeDocumentsListing />

          <HomeEventsListing />

          <AdsListingBlock
            :pagination="false"
            :extra-filters="{ limit: 2 }"
            class="mt-xl"
          />
        </template>

        <template #main>
          <HomeNewsSlider />

          <HomeNewsListing />
        </template>
      </TwoColumnsLayout>
    </TemplateContainer>
  </div>
</template>

<script>
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'
import CardImageListing from '@inside-commons/components/lib/CardImageListing'
import AdsListingBlock from '@inside-ads/components/listings/AdsListingBlock'
import FlashNews from '@inside-commons/components/lib/FlashNews'

import HomeHeroModule from '../components/home/HomeHeroModule'
import HomeFlashInfos from '../components/home/HomeFlashInfos'
import HomeDocumentsListing from '../components/home/HomeDocumentsListing'
import HomeEventsListing from '../components/home/HomeEventsListing'
import HomeNewsSlider from '../components/home/HomeNewsSlider'
import HomeNewsListing from '../components/home/HomeNewsListing'

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

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

export default {
  name: 'HomePage',
  components: {
    CardImageListing,
    TemplateContainer,
    TwoColumnsLayout,
    FlashNews,
    HomeHeroModule,
    HomeFlashInfosWithData: withFetch(HomeFlashInfos)(fetchFlashInfos),
    HomeDocumentsListing,
    HomeEventsListing,
    HomeNewsSlider,
    HomeNewsListing,
    AdsListingBlock
  },
  beforeMount() {
    this.$store.commit('setContentMainsActions', {
      add: [
        'news',
        'news_categories',
        'events',
        'events_categories',
        'infos_flash',
        'flash_news',
        'articles',
        'postings'
      ]
    })
  }
}
</script>

<style lang="scss">
.two-columns-layout-container {
  grid-column-gap: var(--spacing-xxl);
}
</style>
