<template>
    <cs-basic-card
        :height="card.height"
        flat
        :disabled="card.isDisabled"
    >

        <template #icon
            v-if="card.icon"
        >
            <cs-image 
                :src="$url + card.icon"
                :height="32"
                :width="32"
                class="mr-2"
            />
        </template>

        <template #title
            v-if="card.caption"
        >
            <span>{{ __(card.caption) }}</span>
        </template>

        <template #subtitle
            v-if="card.subtitle"
        >
            <span>{{ __(card.subtitle) }}</span>
        </template>

        <template #titleright>
            <slot name="titleright"></slot>
        </template>

        <template #toolbar
            v-if="!! $slots.toolbar"
        >
            <v-toolbar
                dense
                flat
                tile 
            >
                <slot name="toolbar"></slot>
            </v-toolbar>
        </template>

        <v-card-text>
            <slot></slot>
        </v-card-text>

        <template #actions
            v-if="!! $slots.actions"
        >
            <slot name="actions"></slot>
        </template>

        <template #systembarbottom
            v-if="!! $slots.systembarbottom"
        >
            <slot name="systembarbottom"></slot>
        </template>

    </cs-basic-card>
</template>

<script>
    export default {

        props: {
            card: {required: true},
        },

        components: {
            CsBasicCard: require('./CsBasicCard').default,
            CsImage: require('./../images/CsImage').default,
        },
        
        name: 'CsDataCard',
    }
</script>