<template>
  <ListingPage
    :extra-request-filters="extraRequestFilters"
    :filters="[]"
    :banner-data="bannerData"
    endpoint="content/clubs_news"
    size="s"
  >
    <template #default="{ item }">
      <CapsuleNews
        v-bind="item"
        :key="item.uuid"
        :staggered="true"
        :to="{
          name: 'ClubsNewsPage',
          params: { slug: item.slug[0], clubs_slug: $route.params.slug }
        }"
        size="small"
      />
    </template>
  </ListingPage>
</template>

<script>
import ListingPage from '@inside-news/components/pages/ListingPage'
import CapsuleNews from '@inside-news/components/lib/Capsule'

import { http } from '@inside-library/helpers/Http'

export default {
  name: 'ClubsNewsListingPage',
  $_i18nRootPath: 'customs.CLUBS_NEWS_LISTING_PAGE',
  components: { ListingPage, CapsuleNews },
  data() {
    return {
      clubsTitle: null,
      extraRequestFilters: {
        clubs: { 'slug:eq': this.$route.params.slug }
      }
    }
  },
  computed: {
    bannerData() {
      return {
        staticData: {
          title: this.$_tc('title', [this.clubsTitle])
        },
        back: {
          title: this.$_tc('back', [this.clubsTitle]),
          href: {
            name: 'ClubsPage',
            params: {
              slug: this.$route.params.slug
            }
          }
        }
      }
    }
  },
  async beforeMount() {
    this.clubsTitle = await this.getClubsTitle()
  },
  methods: {
    async getClubsTitle() {
      try {
        const { data } = await http.get('content/clubs', {
          fields: ['uuid', 'title'],
          filters: {
            'slug:eq': this.$route.params.slug
          }
        })

        return data[0].title
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>
