<template>
  <Hero :slots="[['1fr']]" size="l" padding-size="xl">
    <template #1-1>
      <NewsHeroSlider :fields="fields" :extra-filters="filterSliderHeroNews" />
    </template>
  </Hero>
</template>

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

import NewsHeroSlider from '@inside-news/components/lib/NewsHeroSlider'

export default {
  name: 'HomeHeroModule',
  components: {
    Hero,
    NewsHeroSlider
  },
  data() {
    return {
      fields: [
        'uuid',
        'title',
        'image',
        'chapo',
        'slug',
        'content_type',
        'is_featured',
        { reactions: ['count', { users: ['uuid'] }] },
        { comments: ['count'] },
        {
          news_categories: ['uuid', 'title', 'color']
        }
      ],
      filterSliderHeroNews: {
        'is_featured:eq': 1
      }
    }
  }
}
</script>

<style lang="scss">
.news-hero-slider {
  .ds-title-container.center {
    margin-top: var(--spacing-m);
  }
}
</style>
