<template>
  <Page
    :extra-rows="extraRows"
    :extra-fields="extraFields"
    :extra-headers="extraHeaders"
    :banner-data="{
      imageKey: 'image'
    }"
    display="component"
  >
    <template #default="{ item }">
      <UserCard
        :key="item.uuid"
        v-bind="item"
        :image="$_getContentImage(item.image, 'thumbnail')"
      />
    </template>
  </Page>
</template>

<script>
import Page from '@inside-users/components/pages/DirectoryPage.vue'

import UserCard from '../components/UserCard'

export default {
  name: 'DirectoryPage',
  $_i18nRootPath: 'users.LISTING',
  components: {
    Page,
    UserCard
  },
  computed: {
    extraFields() {
      return ['email', 'phone', 'mobile', 'function']
    },
    extraHeaders() {
      return [
        { value: this.$_tr('headers.email') },
        { value: this.$_tr('headers.phone') },
        { value: this.$_tr('headers.mobile') }
      ]
    }
  },
  methods: {
    extraRows(fields) {
      return [
        {
          id: 'email',
          class: 'email',
          tag: 'a',
          data: { href: `mailto:${fields.email}` },
          value: fields.email
        },
        {
          id: 'phone',
          class: 'phone',
          value: fields.phone
        },
        {
          id: 'mobile',
          class: 'mobile',
          value: fields.mobile
        }
      ]
    }
  }
}
</script>
