<template>
    <v-card 
        tile 
        flat
        width="50%"
        :outlined="cursuri.length == 0"
    >
        <v-card-title class="px-1 py-1">
            <span class="text-body-2 font-weight-bold">
            {{ __('Selectați cursuri') }}
            </span>
        </v-card-title>

        <v-card-text class="px-1 py-0">
            <v-text-field
                dense
                hide-details
                outlined
                :label="__('Căutare')"
                clearable
                class="mb-2"
                v-model="searchtext"
            >
            </v-text-field>
            
            <v-sheet
                v-if="cursuri.length > 0"
                :height="height"
                width="100%"
                class="overflow-y-auto"
            >
                

                <cursuri-selector-left-item 
                    v-for="(curs, index) in cursuri"
                    :key="'curs-'+ index"
                    :curs="curs"
                    class="mb-1"

                    @click="$emit('select-curs', $event)"
                />
            </v-sheet>

            <cs-centered-alert
                v-else
                :height="height"
                width="100%"
                message="Nu sunt cursuri în listă"
            >
            </cs-centered-alert>

        </v-card-text>
    </v-card>
</template>

<script>
    export default {

        props: {
            cursuri: {required: true},
            height: {required: true},
        },

        data: () => ({
            t: null,
            searchtext: '',
        }),

        watch: {
            searchtext: function() {
                if(this.t)
                {
                    clearTimeout(this.t);
                }

                this.t = setTimeout(() => {
                    this.$emit('search', this.searchtext);
                }, 300);
            }
        },

        components: {
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },
        
        name: 'CursuriSelectorLeft',
    }
</script>