<template>
  <div class="col-12">
    <ul class="persons-list" v-if="entities.length > 0">
      <li v-for="entity in entities" :key="entity.text">
        <on-the-fly
          :type="entity.type"
          :id="entity.id"
          :buttonText="entity.text"
          :displayBadge="true"
          action="show"
        ></on-the-fly>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";

// Types
import { Person } from "ChillPersonAssets/types";
import { Thirdparty } from "src/Bundle/ChillThirdPartyBundle/Resources/public/types";

defineProps<{ entities: Person[] | Thirdparty[] }>();
</script>

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