<template>
  <div class="block-pp-contact-container py-xl">
    <TemplateContainer size="l">
      <Block
        :title="title"
        :title-options="{ alignment: 'center' }"
        title-tag="h2"
        class="block-pp-container"
      >
        <component-listing
          id="block-pp-listing"
          class="block-pp-listing mt-l"
          :static-data="users"
          :pagination="false"
          :fractions="3"
          :use-grid="false"
        >
          <template #default="{item}">
            <ContactCard
              v-bind="item"
              :scaffold-overrides="scaffoldOverrides"
              :image="$_getContentImage(item.image, 'avatar')"
              modal=""
            />
          </template>

          <template #no-data>
            <BaseText> {{ $_tr('empty') }} </BaseText>
          </template>
        </component-listing>
      </Block>
    </TemplateContainer>
  </div>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'

import Block from '@inside-library/components/commons/components/lib/Block'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import ContactCard from '@inside-users/components/lib/Card'

export default {
  name: 'BlockPPContact',
  $_i18nRootPath: 'customs.news.DEFAULT_NEWS_CONTACTS',
  components: {
    BaseText,
    Block,
    TemplateContainer,
    ContactCard
  },
  props: {
    users: {
      type: Array
    },
    title: {
      type: String
    }
  },
  methods: {
    scaffoldOverrides(fields, { replaceItem }) {
      replaceItem('function', {
        id: 'email',
        value: this.getCheckedData(fields, ['email'])
      })
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.block-pp-contact-container {
  background: var(--color-grey-light);

  .block-pp-container {
    h2.ds-title-container {
      font-weight: 600;

      @include fontSize(26);
    }
  }

  .component-listing.use-flex .data-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-m);

    @include mobile {
      flex-direction: column;
    }
  }
}
</style>
