<template>
    <v-card
        tile
        flat
        :height="height"
        width="100%"
        class="overflow-hidden d-flex justify-space-between align-start"
    >
        
        <curs-card
            :curs="curs"
            :width="cursCardWidth"
            :actionButton="true"
            @preview="OnClickPreview"
        />

        <curs-preview 
            v-if="previewedCurs"
            :app="app"
            :width="'calc(100% - 8px - ' + cursCardWidth + 'px)'"
            :height="height"
            :curs="previewedCurs"
        />
    </v-card>
</template>

<script>
    
    export default {

        props: {
            app: {required: true},
            curs: {required: true},
            height: {required: true},
            cursCardWidth: {default: 320},
        },

        computed: {
            previewedCurs() {
                return this.app.classes.Cursuripropertiespage.previewedCurs;
            }
        },

        methods: {

            OnClickPreview(curs) {
                this.app.classes.Cursuripropertiespage.previewedCurs = curs;
            }
        },

        name: 'CursProperties',
    }
</script>