// Homepage grid
<template lang="pug">
.page--index.f-row.between
    article.f-grow.shadow.b-radius
        header
            h1 {{ site }}: index
        section(v-if="allPagesLoaded")
            h4 pages
            p {{ Object.values(allPages).length }}
        section(v-if="allPostsLoaded")
            h4 posts
            p {{ Object.values(allPosts).length }}
        section
            //- COMPONENT: Looping component
            .post(v-for="post in allPosts")
                h4.post--title {{ post.slug }}
                ul.post--content
                    li.post--content--block(v-for="block in post.blocks" v-html="block")
        footer.f-row
            p icon

    //- COMPONENT: Make this with a prop
    aside.shadow.b-radius
        header
            h4 this is some other stuff
        section(v-if="allPostsLoaded")
            //- COMPONENT: See above
            .post(v-for="post in allPosts")
                h4.post--title {{ post.slug }}
                ul.post--content
                    li.post--content--block(v-for="block in post.blocks" v-html="block")

</template>

<script>
import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters({
            somePages: 'somePages',
            allPages: 'allPages',
            allPostsLoaded: 'allPostsLoaded',
            allPosts: 'allPosts',
            allPagesLoaded: 'allPagesLoaded',
        }),
    },
    data() {
        return {
            site: wp.site_name,
        }
    },
    mounted() {
        console.log('routes: ', wp.routes)
        console.log('rest url: ', wp.rest)
        console.log('template: ', wp.template)

        this.$store.dispatch('getAllPages')
        this.$store.dispatch('getAllPosts')
    }
}
</script>