<template>
    <v-card
        tile
        flat
        :width="width"
        :height="height"
        outlined
        class="folders-side"
    >

        <cs-toolbar 
            :toolbar="uploader.folderstoolbar"
        />
        
        <v-divider></v-divider>

        <v-card
            tile
            flat
            :height="height - 51"
            color="overflow-y-auto"
        >
            <cs-centered-alert
                v-if="dataprovider.request_count == 0"
                :height="height - 51"
                width="100%"
                message="Se încarcă..."
            >
                <v-progress-circular
                    indeterminate
                    color="orange darken-1"
                >
                </v-progress-circular>
            </cs-centered-alert>

            <cs-centered-alert
                v-else-if="uploader.folderstree.length == 0"
                :height="height - 51"
                width="100%"
                message="Nu sunt foldere definite"
            >
            </cs-centered-alert>

            <folders-tree v-else
                :uploader="uploader"
                :height="height - 51"
                :folders="uploader.folderstree"
                :parentFolder="null"
            />
        </v-card>
    </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;
            },

            dataprovider() {
                return this.app.dataSession.Folders;
            }            
        },

        

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

        name: 'FoldersSide',
    }
</script>

<style lang="scss" scoped>
    .folders-side {
        border-right: none !important;
    }
</style>