<template>
  <div class="col-12">
    <ul class="addressees-list" v-if="addressees.length > 0">
      <li v-for="addressee in addressees" :key="addressee.id">
        <span
          v-if="addressee.type === 'user_group'"
          class="badge-user-group"
          :style="`background-color: ${addressee.backgroundColor}; color: ${addressee.foregroundColor};`"
        >
          {{ localizeString(addressee.label) }}
        </span>
        <span v-else-if="addressee.type === 'user'" class="badge-user">
          <user-render-box-badge :user="addressee"
        /></span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
// Components
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";

// Types
import { UserGroupOrUser } from "../../../../../../../../ChillMainBundle/Resources/public/types";

// Utils
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

defineProps<{ addressees: UserGroupOrUser[] }>();
</script>

<style lang="scss" scoped>
ul.addressees-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  & > li {
    display: inline-block;
  }
}
</style>
