<template>
  <component-listing
    id="home-news-listing"
    endpoint="content/news"
    :fields="newsFields"
    :filters="requestFilters"
    :items-per-page="3"
    :fractions="1"
    :pagination="false"
  >
    <template #default="{ item }">
      <Capsule v-bind="item" :key="item.uuid" :staggered="true" />
    </template>
  </component-listing>
</template>

<script>
import { newsFields } from '../../constants'

import Capsule from '../news/CapsuleNews'

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