<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">
            {{ __('Cursuri pentru trimitere') }}
            </span>
        </v-card-title>

        <v-card-text class="px-1 py-0">
            <v-sheet
                :height="height"
                width="100%"
                class="overflow-y-auto"
                 v-if="cursuri.length > 0"
            >
                <cursuri-selector-right-item 
                    v-for="(curs, index) in cursuri"
                    :key="'curs-'+ index"
                    :curs="curs"
                    class="mb-1"

                    @click="$emit('unselect-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},
        },

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

        name: 'CursuriSelectorRight',
    }
</script>