<script setup>
const props = defineProps({
  row: {
    type: Object,
    required: true,
    default: {}
  },
  inShow: {
    type: Boolean,
    default: false
  }
})

const profileStore = useProfileStore()

const profiles = computed(() => props.row.profiles.map(id => profileStore.getProfileById(id).fullName).join(', '))

</script>

<template>
  <div v-if="props.row.profiles">
    <div v-if="props.inShow">
      <nuxt-link v-for="(profileId, index) in props.row.profiles" :to="`/profiles/show/${profileId}`">{{profileStore.getProfileById(profileId).fullName}}{{index < props.row.profiles.length - 1 ? "," : ""}}</nuxt-link>
    </div>
    <span v-else>{{props.row.profiles ? profiles : ''}}</span>
  </div>
</template>
