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

        <v-card-text>
            <cursuri-asigneaza-selector 
                :height="height - 130"
                :cursuriatasate="cursuriatasate"
                v-model="selected"
            />
        </v-card-text>

        <v-card-actions>

            <cs-btn
                color="primary"
                small
                :caption=" __('Înapoi') "
                @click="$emit('prev-step')"
            />
            
            <cs-btn
                color="primary"
                small
                :caption=" __('Continuă')"
                :disabled="selected.length == 0"
                @click="$emit('next-step')"
            />
        </v-card-actions>
    </v-card>

</template>

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

        data: () => ({
            selected: [],
        }),

        watch: {
            selected: function() {
                this.$emit('select-cursuri', this.selected);
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CursAsigneazaCursuri',
    }
</script>