<script setup>
const props = defineProps({
  params: Object
})
</script>

<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags are-small">
    <span v-if="props.params.data.docStatus == 'Completed'" class="tag is-white greenbt is-rounded">Importiert</span>
    <span v-if="props.params.data.docStatus == 'Drafted'" class="tag is-white greybt is-rounded">?</span>
    <span v-if="props.params.data.docStatus == 'Closed'" class="tag is-dark is-rounded">CL</span>
    <span v-if="props.params.data.docStatus == 'Voided'" class="tag redbt is-rounded">X</span>
<!--    <span v-else >{{ props.params.data.docStatus }}</span>-->
      </div>
  </div>
</template>

<style scoped>
.tag {
  width: auto;
  height: 20px;
}
.greenbt {
  color: white;
  background-color: #00a500;
  /* border: 2px solid #00a500; */
}

.greybt {
  color: grey;
  border: 1px solid grey;
}

.redbt {
  color: red;
  border: 2px solid red;
}

</style>