<template>
  <component-listing
    id="teams-listing"
    :static-data="users"
    :pagination="false"
    :grid-gap="$_theme('spacingM')"
    class="teams-listing-container"
  >
    <template #default="{ item }">
      <AvatarWithTooltip
        v-bind="item"
        :image="$_getContentImage(item.image, 'avatar')"
        @click="openModal(item)"
      >
        <template #popper> {{ $_username(item) }} </template>
      </AvatarWithTooltip>
    </template>
  </component-listing>
</template>

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

import { withTooltip } from 'inside-collection/hocs'

export default {
  name: 'EntityTeams',
  components: {
    AvatarWithTooltip: withTooltip(Avatar, {
      theme: 'dark',
      placement: 'top',
      trigger: 'hover'
    })
  },
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      baseTooltipConfig
    }
  },
  methods: {
    openModal(item) {
      this.triggerModal(
        'user',
        'fetch',
        {
          item: { content_type: 'users', ...item },
          content: 'users'
        },
        {
          layout: 'right',
          transition: 'fadeInLeft',
          useUrlParams: true
        }
      )
    }
  }
}
</script>

<style lang="scss">
.teams-listing-container {
  .data-container {
    grid-template-columns: repeat(
      auto-fill,
      minmax(calc(min(40px, 100%)), 1fr)
    ) !important;
  }

  .ds-avatar-container {
    cursor: pointer;
  }
}
</style>
