<template>
    <v-container>
        <v-row>
            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
                <router-link :to="`/manage/preview/${v.id}`">
                    <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
                </router-link>
                <div class="d-flex">
                    <span class="flex-grow-1">{{ v.name }}</span>
                </div>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>

export default {
    data(){
        return {
            items: []
        }
    },
    
    async created(){
        this.items = (await this.$api.game.search()).data.data
    },
}
</script>

<route>
    {
        meta: {
            layout: "console"
        }
    }
</route>