<template>
  <div class="ui list">
    <!-- Loop through the infos -->
    <div class="item" v-for="info in infos">
      <div class="header">{{ info.header }}</div>
      <!-- if we have a link, make it a clickable object -->
      <template v-if="info.link">
        <router-link :to="info.link">
          {{ info.content }}
        </router-link>
      </template>
      <!-- if our content object is an array, loop through it and show its content -->
      <template v-else-if="Array.isArray(info.content)">
        <template v-for="(infoitem, index) in info.content">
          <!-- if we have a link, make it a clickable object -->
          <template v-if="infoitem.link">
            <router-link :to="infoitem.link">
              {{ infoitem.content }}
            </router-link>
          </template>
          <!-- Otherwise show its content -->
          <template v-else>
            {{infoitem.content}}
          </template>
          <template v-if="info.content.length > (index + 1)">, </template>
        </template>
      </template>
      <!-- Otherwise show its content -->
      <template v-else>
        <span v-html="info.content"></span>
      </template>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'List',
    props: {
      infos: Array
    }
  }
</script>

<style scoped>

</style>
