<template>
  <Block
    :title="$_tr('title')"
    :title-options="{ alignment: 'center' }"
    title-tag="h3"
    class="mt-xl"
  >
    <component-listing
      id="social-block"
      :fractions="2"
      :fields="fields"
      :filters="filters"
      endpoint="content/socials"
    >
      <template #default="{ item }">
        <CardLinkWithEdition
          :key="item.uuid"
          v-bind="item"
          :link="item.link"
          :image="$_getContentImage(item.image, 'banner-page')"
          size="xs"
        />
      </template>
    </component-listing>
  </Block>
</template>

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

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

import { withEdition } from '@inside-edition/hocs'

export default {
  name: 'HomeSocialBlock',
  $_i18nRootPath: 'customs.HOMEPAGE.social',
  components: {
    IconText,
    Block,
    CardLinkWithEdition: withEdition(CardLink)
  },
  data() {
    return {
      fields: ['image', 'link', 'display_order', 'content_type', 'admin'],
      filters: { sort: 'display_order:asc', limit: 2 }
    }
  }
}
</script>
