<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/scenarios/${v.id}`">
                    <v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
                </router-link>
                <div class="d-flex">
                    <span class="flex-grow-1">{{ v.name }}</span>
                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/manage/scenarios/${v.id}`" color="primary"></v-btn>
                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
                </div>
            </v-col>
        </v-row>
    </v-container>
    <v-dialog v-model="confirmDialog" width="auto">
        <v-card  :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
            <template v-slot:actions>
                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
            </template>
        </v-card>
    </v-dialog>
</template>

<script>

export default {
    data(){
        return {
            items: [],
            confirmDialog: false,
            confirmTarget: null
        }
    },
    
    async created(){
        this.items = (await this.$api.scenario.search()).data.data
    },

    methods:{
        async remove(item){
            await this.$api.scenario.remove(item.id);
            this.confirmDialog = false;
            this.items.splice(this.items.indexOf(item), 1);
        }
    }
}
</script>

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