<template>
  <Block :title="$_tr('title')" title-tag="h3">
    <component-listing
      id="aside-users-listing"
      :static-data="users"
      direction="vertical"
    >
      <template #default="{ item }">
        <Card
          v-bind="item"
          :key="item.uuid"
          :image="$_getContentImage(item.image, 'avatar')"
          :modal="null"
          :scaffold-overrides="cardOverrides"
        />
      </template>
    </component-listing>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'
import Card from '@inside-users/components/lib/Card'

export default {
  name: 'KeyContacts',
  $_i18nRootPath: 'customs.PROCEDURES.CONTACTS',
  components: {
    Block,
    Card
  },
  props: {
    users: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    cardOverrides(data, { addItemBefore }) {
      addItemBefore('function', {
        id: 'email',
        tag: 'a',
        value: data.email,
        data: {
          href: `mailto:${data.email}`
        }
      })
    }
  }
}
</script>
