<template>
    <v-card
        tile
        flat
    >
        <v-sheet
            class="pa-1 font-weight-bold white--text text-body-2"
            :color="list.color"
        >
            {{ __(list.caption) }} ({{items.length}})   
        </v-sheet>

        <cs-centered-alert
            v-if="items.length == 0"
            :height="height - 28"
            width="100%"
            message="Nu sunt"
        >
        </cs-centered-alert>
        
        <v-sheet
            v-else
            :height="height - 28"
            width="100%"
            class="overflow-y-auto"
        >
            <v-sheet class="pa-2">
                <user-cursuri-quick-list-item 
                    v-for="(usercurs, index) in items"
                    :key="'curs-' + index"
                    :usercurs="usercurs"
                    @open-curs="OpenCurs"
                />
            </v-sheet>
        </v-sheet>

    </v-card>
</template>

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

        computed: {
            items() {
                return this.GetCursuri(this.list.type);
            }
        },

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

            GetCursuri(color) {
                let r = [...this.cursuri];
                let parts = color.split('|');
                return _.filter(r, item => {
                    let r = false;

                    _.each(parts, p => {
                        if(p == item.status_termen.color)
                        {
                            r = true;
                        }
                    })
                    return r;
                })
            }
        },

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

        name: 'UserCursuriQuickList',
    }
</script>