<template>
  <Block
    v-if="members.length"
    :title="$_tr('title')"
    title-tag="h3"
    class="space-collaborators-container"
  >
    <template #default>
      <component-listing
        id="space-collaborators-listing"
        :static-data="members"
        direction="vertical"
      >
        <template #default="{ item }">
          <UserCard
            v-bind="item"
            :key="item.uuid"
            :image="$_getContentImage(item.image, 'avatar')"
          />
        </template>
      </component-listing>
    </template>
  </Block>
</template>

<script>
import { Title } from 'inside-collection/atoms'
import { IconTextButton } from 'inside-collection/components'
import Block from '@inside-commons/components/lib/Block'

import UserCard from '../directory/UserCard'

export default {
  name: 'SpaceCollaborators',
  $_i18nRootPath: 'customs.SPACE.COLLABORATORS',
  components: { Block, Title, IconTextButton, UserCard },
  props: {
    franchised: {
      type: Array
    },
    collaborators: {
      type: Array
    }
  },
  data() {
    return {
      members: this.franchised.concat(this.collaborators)
    }
  }
}
</script>

<style lang="scss">
.space-collaborators-container {
  margin-bottom: var(--spacing-xxl);
}
</style>
