<template>
  <Block
    v-if="showSocials"
    :title="$_tr('title')"
    :title-options="{ alignment: 'center' }"
    title-tag="h3"
  >
    <component-listing
      id="social-block-listing"
      :fields="fields"
      :filters="filters"
      :fractions="2"
      endpoint="content/cards_links"
      :on-request-success="onRequestSuccess"
    >
      <template #default="{ item }">
        <HomeCardLink :key="item.uuid" :data="item" />
      </template>
    </component-listing>
  </Block>
</template>

<script>
import { Link } from 'inside-collection/components'
import { IconText } from 'inside-collection/atoms'

import Block from '@inside-library/components/commons/components/lib/Block'

import HomeCardLink from './HomeCardLink'

export default {
  name: 'HomeSocialBlock',
  $_i18nRootPath: 'customs.HOMEPAGE.social',
  components: {
    Link,
    IconText,
    Block,
    HomeCardLink
  },
  data() {
    return {
      showSocials: true,
      filters: {
        'status:eq': 1,
        sort: 'published_at:desc',
        limit: 2,
        'published_at:lte': 'now()'
      },
      fields: [
        'uuid',
        'title',
        'admin',
        'image',
        'link',
        'published_at',
        'content_type'
      ]
    }
  },
  methods: {
    onRequestSuccess({ data }) {
      this.showSocials = data.length > 0

      return data
    }
  }
}
</script>
