<template>
    <AssetBrowser @select="$router.push(`/manage/game-objects/${$event.id}`)" ref="browser">
        <template v-slot:action-buttons="{ object }">
            <v-btn density="comfortable" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/manage/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
            <v-btn density="comfortable" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
        </template>
    </AssetBrowser>
    <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 {
            confirmDialog: false,
            confirmTarget: null
        }
    },

    methods:{
        async remove(item){
            await this.$api.gameObject.remove(item.id);
            this.confirmDialog = false;
            this.$refs.browser.load();
        }
    }
}
</script>

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