<template>
  <div class="groups-listing-page">
    <Banner page="human-resources" />

    <TemplateContainer size="l">
      <component-listing
        id="groups-listing"
        endpoint="content/news_categories"
        direction="horizontal"
        :fields="requestFields"
        :filters="requestFilters"
      >
        <template #default="{ item }">
          <CardImage v-bind="item" :image="null" @click="redirection(item)" />
        </template>
      </component-listing>
    </TemplateContainer>
  </div>
</template>

<script>
import { CardImage } from 'inside-collection/components'

import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

export default {
  name: 'GroupsListingPage',
  components: {
    Banner,
    TemplateContainer,
    CardImage
  },
  data() {
    return {
      requestFields: ['uuid', 'title', 'color', 'slug', 'content_type'],
      requestFilters: {
        'status:eq': 1,
        sort: 'title:asc'
      }
    }
  },
  methods: {
    redirection(item) {
      return this.$router.push({
        name: 'NewsListingPage',
        params: { slug: item.slug[0] },
        query: { news_categories: item.uuid }
      })
    }
  }
}
</script>
