<template>
<div class="d-flex flex-column">
  <User :user="mercuryStore.user" />
  <div v-for="user in users" :key="user.id" class="d-flex flex-row align-items-center">
    <User :user="user" />
  </div>
</div>
</template>

<script setup>
import { computed } from 'vue'
import { useMercuryStore } from '../../stores/mercuryStore'
import { useUserStore } from '../../stores/userStore'
import User from './User.vue'

const props = defineProps(['channel'])
const channelId = computed(() => { return props.channel.id })

const userStore = useUserStore()
const mercuryStore = useMercuryStore()
const users = computed(() => { return userStore.getUsersByChannelId(channelId.value) })
</script>
