<template>
    <v-card tile flat outlined :width="width" :height="height">
        <cs-toolbar :toolbar="uploader.filestoolbar">
            <v-sheet width="200">
                <v-text-field
                    v-if="selectedFolder"
                    dense
                    hide-details
                    clearable
                    :placeholder="__('Căutare în folderul curent...')"
                    append-icon="mdi-magnify"
                    class="text-body-2"
                    :disabled="false"
                    v-model="uploader.activeFolderManager.innerSearchText"
                >
                </v-text-field>
            </v-sheet>
        </cs-toolbar>
        
        <v-divider></v-divider>

        <cs-centered-alert 
            v-if="! selectedFolder"
            :height="height - 51"
            message="Niciun un folder nu este selectat"
        />

        <template v-else>
            <v-sheet
                :height="height - 51"
                class="overflow-y-auto"
            >
                <folders-list 
                    :uploader="uploader"
                />
                
                <files-list 
                    :uploader="uploader"
                    :files="files"
                />
            </v-sheet>
        </template>
    </v-card>
</template>

<script>
    export default {
        props: {
            uploader: {required: true},
            height: {default: null},
            width: {required: true},
        },

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

            customer() {
                return this.uploader.customer;
            },

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

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

        components: {
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'FilesSide',
    }
</script>