<template>
  <Page
    :bannerData="bannerData"
    :fields="fields"
    :extra-request-filters="extraRequestFilters"
    :filters="[]"
    :items-per-page="6"
    endpoint="content/forms"
  >
    <template #default="{ item }">
      <Capsule
        v-bind="item"
        :key="item.uuid"
        :staggered="true"
        :to="{ name: 'FormPage', params: { slug: item.slug[0] } }"
        size="half"
      />
    </template>
  </Page>
</template>

<script>
import Page from '@inside-news/components/pages/ListingPage'
import Capsule from '../components/forms/FormCapsule'

export default {
  name: 'FormsListingPage',
  components: { Page, Capsule },
  data() {
    return {
      bannerData: {
        page: 'forms-listing',
        add: ['forms']
      },
      fields: [
        'uuid',
        'title',
        'admin',
        'content_type',
        'image',
        'slug',
        'published_at',
        { reactions: ['count', { users: ['uuid', 'lastname', 'firstname'] }] }
      ],
      extraRequestFilters: {
        'form_type:eq': 'surveys'
      }
    }
  }
}
</script>
