<template>
  <div class="home-page-container">
    <HomeHeroModule />

    <TemplateContainer size="l">
      <TwoColumnsLayout :separator="false" class="mb-xxl">
        <template #sidebar>
          <EventsListingBlock :pagination="false" class="mb-xl" />

          <EventCtaItem class="mb-xl" />

          <HomeMovementsListing />

          <HomeOffersListingWithData />
        </template>

        <template #main>
          <HomeNewsSliderWithData class="mb-xxl" />

          <HomeListingNews />
        </template>
      </TwoColumnsLayout>

      <HomeSocialBlock />

      <HomeImageFooter />
    </TemplateContainer>
  </div>
</template>

<script>
import { withFetch } from 'inside-collection/hocs'

import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import TwoColumnsLayout from '@inside-commons/components/lib/TwoColumnsLayout'
import EventsListingBlock from '@inside-events/components/lib/EventsListingBlock'

import HomeHeroModule from '../components/home/HomeHeroModule'
import HomeListingNews from '../components/home/HomeListingNews'
import HomeSliderNews from '../components/home/HomeSliderNews'
import HomeOffersListing from '../components/home/HomeOffersListing'
import HomeImageFooter from '../components/home/HomeImageFooter'

import EventCtaItem from '../components/home/EventCtaItem'
import HomeMovementsListing from '../components/home/HomeMovements'
import HomeSocialBlock from '../components/home/HomeSocialBlock'

import { fetchNewsSlider, fetchOffersListing } from '../components/home/fetch'

export default {
  name: 'HomePage',
  components: {
    TemplateContainer,
    TwoColumnsLayout,
    EventsListingBlock,
    HomeHeroModule,
    HomeNewsSliderWithData: withFetch(HomeSliderNews)(fetchNewsSlider),
    HomeOffersListingWithData: withFetch(HomeOffersListing)(fetchOffersListing),
    HomeListingNews,
    HomeMovementsListing,
    EventCtaItem,
    HomeSocialBlock,
    HomeImageFooter
  },
  beforeMount() {
    this.$store.commit('setContentMainsActions', {
      add: ['news', 'entities', 'events', 'forms', 'corporates', 'quiz']
    })
  }
}
</script>
