<template>
  <a v-if="item.key <= 8" :href="item.id" :class="{ active: isActive }">
    <i class="fa fa-fw fa-square" />
    <span>{{ item.key }}</span>
  </a>
  <a v-else-if="step === 'DRAFT'" :href="item.id" :class="{ active: isActive }">
    <i class="fa fa-fw fa-square" />
    <span>{{ item.key }}</span>
  </a>
</template>

<script>
export default {
  name: "Item",
  props: ["item", "step"],
  computed: {
    isActive() {
      return this.item.active;
    },
  },
};
</script>
