<template>
  <div class="model-abilities">
    <template v-if="model.description">
      Description:
      <pre>{{ model.description }}</pre>
    </template>

    <template v-if="supports.length > 0">
      This model supports:
      <ul>
        <li v-for="(feature, key) in supports"
            v-bind:key="key">
          {{ feature }}
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
export default {
  name: "model-abilities",
  props: ['model'],
  computed: {
    supports: function () {
      if (!this.model)
        return [];

      const supported = {
        'bounding-boxes': 'bounding boxes',
        'labeled-bounding-boxes': 'labeled bounding boxes',
        'labeled-images': 'labeled images',
        'fit': 'fit new data'
      };

      return this.model.supports.map(k => k in supported ? supported[k] : 'unknown feature');
    },
  }
}
</script>

<style scoped>
pre {
  margin: 0.2rem 0 1rem;
  font-size: 105%;

  white-space: pre-wrap;
  word-wrap: anywhere;
}

ul {
  margin-top: 0.2rem;
}
</style>
