<template>
    <v-card tile flat>

        <v-sheet v-if="!! curs" class="grey lighten-3 d-flex align-center">
            <curs-preview 
                :curs="curs"
                :height="120"
            />
        </v-sheet>

        <v-sheet outlined class="pa-1" v-if="!! curs">
            <v-sheet class="font-weight-bold text-body-2 text-truncate" width="100%">
                {{ curs.name }}
            </v-sheet>

            <v-sheet class="text-caption orange--text text--darken-3" width="100%" v-if="usercurs.trimitere.tip_curs == 'onsite'">
                {{ __('Locație') }}: <strong>{{ usercurs.trimitere.location || '-'}}</strong>
                {{ __('Data') }}: <strong>{{ ToDate(usercurs.trimitere.data_curs) || '-'}}</strong><br/>
                {{ __('Ora') }}: <strong>{{ usercurs.trimitere.ora_curs || '-'}}</strong>
                {{ __('Durata') }}: <strong>{{ usercurs.trimitere.durata_curs || '-' }} </strong>
            </v-sheet>

            <v-sheet class="text-body-2">
                {{ curs.category ? curs.category.name : __('Nu are categorie') }}
            </v-sheet>

            <curs-perioada-completare 
                :trimitere="usercurs.trimitere"
            />
            
            <curs-status 
                :usercurs="usercurs"
                @click-status="OnClickStatus"
            />
            
            <v-sheet 
                height="120"
                class="overflow-y-auto text-caption" 
                v-html="curs.descriere || __('Nu are descriere')"
            >
            </v-sheet>

            <v-sheet class="d-flex justify-center">
                
                <cs-btn 
                    caption="Deschidere"
                    tooltip="Deschide cursul"
                    color="primary"
                    @click="OnClickDeschidere"
                />

            </v-sheet>

        </v-sheet>
    </v-card>
</template>

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

        computed: {
            curs() {
                return this.usercurs.curs;
            }
        },

        methods: {
            OnClickStatus(e) {
                this.$emit('click-status', e);
            },

            OnClickDeschidere() {
                this.$emit('open-curs', this.usercurs);
            }
        },

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

        name: 'UserCursuriListItem',
    }
</script>