<template>
  <base-dashboard-component class="vis-document-listing">
    <template #header>
      Visualization documents
    </template>

    <template #content>
      <div class="columns is-multiline">
        <Item v-for="vd in documents" :key="vd.id" v-bind="vd" class="is-narrow column is-2" />
        <Item type="new" class="column is-2" />
      </div>
    </template>
  </base-dashboard-component>
</template>

<script>
import Item from './Item/index.vue'

export default {
  components: { Item },
  props: {
    documents: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="sass">
.recent-box
  visibility: hidden
  background-color: $light-gray

.recent-work
  margin-left: 0.8rem
  margin-top: 0.2rem
  color: #6F76FF //#363636
  text-transform: uppercase
  letter-spacing: .05rem
  font-size: 0.7rem
</style>
