<template>
  <base-box-item>
    <template #title>
      {{ title }}
    </template>

    <template #description>
      <p class="bubble-description" style="margin-top: -.5rem">
        {{ description }}
      </p>

      <p v-if="isIndexed">
        <span class="highlight">Objects: </span> {{ objects }}
        <span class="highlight">Links: </span> {{ links }}
      </p>
    </template>
  </base-box-item>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: ''
    },
    isIndexed: {
      type: Boolean,
      default: false
    },
    objects: {
      type: Number,
      default: 0
    },
    links: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="sass" scoped>
.sourceItem
  max-height: 100px
p
  pointer-events: none
  font-size: $small-font-size
  color: $secondary-text-color

.highlight
  font-weight: 500
</style>
