<template>
    <v-card tile flat :height="height" width="100%" class="overflow-y-auto">

        <cs-centered-alert
            v-if="cursuri.length == 0"
            :height="height"
            width="100%"
            message="Nu sunt cursuri de afișat"
        >
        </cs-centered-alert>

        <template v-else>
            <v-sheet
                v-for="(usercurs, index) in cursuri"
                :key="'curs-' + index"
                class="float-left pl-2 mb-2"
                width="25%"
                min-width="280"
            >
                <user-cursuri-list-item    
                    :usercurs="usercurs"
                    @open-curs="OpenCurs"
                    @click-status="OpenStatusForm"
                />
            </v-sheet>
        </template>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            dataprovider: {required: true},
            height:  {required: true},
        },

        computed: {
            controller() {
                return this.app.classes.Cursuri;
            },

            cursuri() {
                return _.map(this.dataprovider.items, item => item)
            },
        },

        watch: {
            'controller.innerSearchText': function(search) {
                this.controller.SearchBy();
            }
        },
        
        methods: {
            OpenStatusForm(e) {
                this.app.classes.Cursuri.OpenStatusForm(e);
            },

            OpenCurs(usercurs) {
                this.app.classes.Cursuri.OpenCurs(usercurs);
            }
        },

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

        name: 'UserCursuriList',
    }
</script>