<template>
  <span v-if="!active.length" class="text-foreground">Sem acesso</span>

  <span v-else class="row inline items-center" style="gap: 4px">
    <q-badge
      v-for="level in active"
      :key="level.key"
      color="primary"
      outline
      :label="level.label"
    />
  </span>
</template>

<script setup>
import { computed } from "vue";
import { PERMISSION_LEVELS } from "src/pages/permissions/permission_menus";

const { bits } = defineProps({
  bits: {
    type: Number,
    default: 0,
  },
});

const active = computed(() =>
  PERMISSION_LEVELS.filter((level) => (bits & level.bit) !== 0),
);
</script>
