<template>
    <v-sheet
        :width="width"
    >
        <v-card
            width="100%"
            elevation="2"
            :height="height"
        >
            <v-img
                width="100%"
                :max-height="0.35 * height"
                :src="curs.my_image"
            >
            </v-img>

            <v-sheet
                width="100%"
                :height="0.65 * height - (actionButton ? 28 : 0)"
                class="overflow-x-hidden ovrflow-y-auto"
            >
                <div class="px-2 pt-1 font-weight-bold text-body-2 text-truncate">
                    {{curs.name}}
                </div>

                <curs-card-category-level 
                    :curs="curs"
                />

                <curs-card-period 
                    v-if="curs.date_from || curs.date_to"
                    :curs="curs"
                />

                <curs-card-description 
                    :showDescripton="showDescripton"
                    :curs="curs"
                />

                <curs-card-tematica 
                    :curs="curs"
                />
                    
            </v-sheet>

            <curs-card-actions 
                v-if="actionButton"
                :curs="curs"
                @preview="$emit('preview', $event)"
            />
        </v-card>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            curs: {required: true},
            width: {default: null},
            
            /**
             * daca sa se afiseze butonul de Deschidere curs sau nu
             */
            actionButton: {default: true},
        },

        data: () => ({
            psid: null,
            showTematica: false,
            showDescripton: true,
        }),

        computed: {
            height(){
                return 1.6 * this.width;
            },
        },

        components: {
            CursCardCategoryLevel: require('./Cardelements/CursCardCategoryLevel').default,
            CursCardDescription: require('./Cardelements/CursCardDescription').default,
            CursCardTematica: require('./Cardelements/CursCardTematica').default,
            CursCardActions: require('./Cardelements/CursCardActions').default,
            CursCardPeriod: require('./Cardelements/CursCardPeriod').default,
        },

        name: 'CursCard',
    }
</script>