<template>
  <component-listing
    id="homepage-news-listing"
    endpoint="content/news"
    :fields="requestFields"
    :filters="requestFilters"
    :fractions="1"
    :pagination="false"
    :items-per-page="3"
    :grid-gap="$_theme('spacingXxl')"
    direction="vertical"
  >
    <template #default="{ item }">
      <Capsule
        v-bind="item"
        :key="item.uuid"
        :staggered="true"
        :staggered-reversed="true"
      />
    </template>
  </component-listing>
</template>

<script>
import Capsule from '../news/Capsule'

import { capsuleFields } from '../../constants'

export default {
  name: 'NewsListing',
  components: { Capsule },
  data() {
    return {
      requestFields: capsuleFields,
      requestFilters: {
        'status:eq': 1,
        'is_featured:eq': 0,
        'published_at:lte': 'now()',
        sort: 'published_at:desc'
      }
    }
  }
}
</script>
