<template>
    <v-card
        tile
        flat
        :outlined="page.outlined"
        :height="app.height"
        :width="app.width"
        class="mx-auto overflow-hidden"
    >
        <v-card-title class="pa-1">
            <image-icon 
                :src="app.url + 'imgs/blue-icons/' + page.image + '.png'"
            />

            {{ __(page.title, {name: curs.name}) }}
            
            <v-spacer></v-spacer>
            
            <cs-btn
                icon="mdi-arrow-left"
                :caption="app.width > 650 ? 'Lista cursurilor' : null"
                tooltip="Înapoi la lista cursurilor"
                text
                :click="Back"
            />
        </v-card-title>

        <v-card-text class="pa-1"> 
            <curs-properties 
                :app="app"
                :height="app.height - 50"
                :curs="curs"
            /> 
        </v-card-text>
    </v-card>
</template>

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

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

            curs() {
                return this.app.classes.Controller.activeRecord;
            },

        },

        methods: {
            Back() {
                this.page.previewedCurs = null;
                this.app.classes.Controller.currentComponent = 'cursuri-page';
            }
        },

        components: {
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },
        
        name: 'CursPropertiesPage',
    }
</script>