<template>
  <div class="kole-cardlist" :style="{ gridTemplateColumns: 'repeat(' + cols + ', 1fr)' }">
    <div class="kole-cardlist-item" v-for="(it, i) in items" :key="i">
      <div class="kole-card-cover">{{ it.emoji || '📄' }}</div>
      <div class="kole-card-body">
        <div class="kole-card-title">{{ it.title }}</div>
        <div class="kole-card-desc">{{ it.desc }}</div>
        <div class="kole-card-tags" v-if="it.tags && it.tags.length">
          <span class="kole-card-tag" v-for="(t, ti) in it.tags" :key="ti">{{ t }}</span>
        </div>
      </div>
      <div class="kole-card-actions" v-if="it.actions && it.actions.length">
        <button v-for="(a, ai) in it.actions" :key="ai" @click="$emit('action', { item: it, action: a })">{{ a }}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleCardList',
  props: {
    items: { type: Array, default: function () { return []; } },
    cols: { type: Number, default: 3 }
  }
};
</script>

<style src="./CardList.css"></style>
