<template>
  <Page
    :items-per-page="6"
    :fractions="3"
    :fields="requestFields"
    :filters="filters"
    :grid-gap="$_theme('spacingL')"
    filters-input="selectbox"
    page="project-news-listing"
    endpoint="content/project_news"
    size="l"
    class="projects-news-listing-container"
  >
    <template #default="{ item }">
      <SubsidiaryNewsCard v-bind="item" :key="item.uuid" />
    </template>
  </Page>
</template>

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

export default {
  name: 'SubsidiaryNewsListingPage',
  $_i18nRootPath: 'customs.SUBSIDIARIES_NEWS',
  components: { Page, SubsidiaryNewsCard },
  data() {
    return {
      requestFields: [
        'uuid',
        'title',
        'project_mews_content',
        'published_at',
        'chapo',
        'image_link',
        'uri',
        { subsidiaries: ['uuid', 'title', 'slug'] }
      ]
    }
  },
  computed: {
    filters() {
      return [
        {
          id: 'subsidiaries',
          type: 'selectbox',
          modelName: 'subsidiaries',
          fetch: true,
          reference: 'subsidiaries',
          fields: ['uuid', 'title'],
          filters: { 'status:eq': 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.subsidiaries')
        }
      ]
    }
  }
}
</script>
