<template>
    <v-sheet
        width="100%"
        class="d-flex align-center clickable"
        @dblclick="OnDblClick"
    >
        <v-icon>
            mdi-folder-outline
        </v-icon>
        
        <v-sheet width="calc(100% - 24px - 140px - 140px - 90px)" class="text-caption text-truncate">
           {{ __(folder.name.trim()) }}
        </v-sheet>

        <v-sheet width="140" class="text-left text-caption">
            {{ ToDateTime(folder.updated_at ? folder.updated_at : folder.created_at) }}
        </v-sheet>

        <v-sheet width="90" class="text-left text-caption">
            {{ app.config.platforms[folder.platform] }}
        </v-sheet>

        <v-sheet width="140" class="text-left text-truncate text-caption">
            {{ user }}
        </v-sheet>

    </v-sheet>
</template>

<script>
    export default {

        props: {
            uploader: {required: true},
            folder: {required: true}
        },

        computed: {
            app() {
                return this.uploader.app;
            },

            selectedFolder() {
                return this.uploader.activeFolderManager.selectedFolder;
            },

            users() {
                return this.app.dataSession.Users.usersPluckById;
            },

            user() {
                let user_id = this.folder.updated_by ? this.folder.updated_by : this.folder.created_by;
                return _.has(this.users, user_id) ? this.users[user_id].full_name : '';
            }
        },

        methods: {
            OnDblClick(e) {
                e.preventDefault();
                e.stopPropagation();
                this.uploader.openFoldersManager.OpenFolder(this.folder);
                this.uploader.activeFolderManager.SetActiveFolder(this.folder);
            },
        },

        name: 'FoldersListItem',
    }
</script>