<template>
  <v-container>
    <v-list two-line dense class="elevation-2">
      <template v-for="item in collections">
        <v-list-item
          :key="`item-${item.coll}`"
          link
          nuxt
          :to="`/admin/resources/${item.coll}`"
        >
          <v-list-item-avatar>
            <v-icon
              v-text="item.icon"
            />
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title v-text="item.label" />
            <v-list-item-subtitle v-text="item.description" />
          </v-list-item-content>

          <v-list-item-action />
        </v-list-item>
        <v-divider :key="`divider-${item.coll}`" />
      </template>
    </v-list>
  </v-container>
</template>

<script>
export default {
  layout: 'admin',
  data: () => ({
    collections: []
  }),
  mounted () {
    this.$store.commit('admin/ui/setTitle', 'Resources')
    this.$store.commit('admin/ui/setBreadcrumbs', [
      { text: 'Admin', to: '/admin' },
      { text: 'Resources', to: '/admin/resources' }
    ])
    this.getCollections()
  },
  methods: {
    getCollections () {
      this.$axios.get('/cloud/api/__intern/collections')
        .then((res) => {
          this.collections = res.data
        })
    }
  }
}
</script>
