<template>
  <Frame
    :background-color="$_theme('colorPrimary100')"
    :padding-y="$_theme('spacingXl')"
  >
    <NewsListingBlock
      :extra-filters="{ 'is_featured:ne': 1 }"
      :block-options="blockOptions"
      :items-per-page="3"
      :pagination="false"
      :fractions="3"
      :grid-gap="$_theme('spacingL')"
    >
      <template #newsItem="{ item }">
        <Minimal
          v-bind="item"
          :key="item.uuid"
          :to="{
            name: 'NewsPage',
            params: { slug: item.slug[0] }
          }"
        />
      </template>
    </NewsListingBlock>
  </Frame>
</template>

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

import NewsListingBlock from '@inside-news/components/lib/NewsListingBlock'
import Minimal from '@inside-news/components/lib/Minimal'

export default {
  name: 'HomeNewsListing',
  components: { Frame, NewsListingBlock, Minimal },
  data() {
    return {
      blockOptions: {
        title: this.$t(
          'customs.HOMEPAGE.news.LISTING_BLOCK.title',
          this.$store.getters.getCurrentLang
        ),
        titleTag: 'h3',
        titleOptions: { alignment: 'center' },
        link: { name: 'NewsListingPage' },
        linkLabel: this.$t(
          'news.LISTING_BLOCK.moreNews',
          this.$store.getters.getCurrentLang
        )
      }
    }
  }
}
</script>
