<template>
    <v-card
        :disabled="disabled"
        :elevation="elevation"
        :flat="flat"
        :loading="loading"
        :outlined="outlined"
        :shaped="shaped"
        :tile="tile"
        :width="width"
        :height="height"
        :max-height="maxHeight"
        :color="color"
    >
        <v-system-bar
            v-if="!! $slots.systembartop"
        >
            <slot name="systembartop"></slot>
        </v-system-bar>

        <v-card-title
            v-if="!! $slots.icon || !! $slots.title || !! $slots.titleright"
            :class="titleHtmlClass"
        >
            <v-sheet
                v-if="!! $slots.icon || !! $slots.title" 
                tile
                class="d-flex"
                width="calc(100% - 80px)"
            >
                <v-sheet :width="32" v-if="!! $slots.icon">
                    <slot name="icon"></slot>
                </v-sheet>

                <v-sheet :width="!! $slots.icon ? 'calc(100% - 32px)' : 'calc(100%)'" v-if="!! $slots.title" class="text-truncate">
                    <slot name="title"></slot>
                </v-sheet>
            </v-sheet>

            <v-spacer></v-spacer>
            
            <div
                v-if="!! $slots.titleright" 
            >
                <slot name="titleright"></slot>
            </div>
        </v-card-title>

        <v-card-subtitle
            v-if="!! $slots.subtitle"
        >
            <slot name="subtitle"></slot>
        </v-card-subtitle>

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

        <slot>
        </slot>

        <v-card-actions 
            v-if="!! $slots.actions"
            :class="titleHtmlClass"
        >
            <slot name="actions"></slot>
        </v-card-actions>

        <v-system-bar
            v-if="!! $slots.systembarbottom"
        >
            <slot name="systembarbottom"></slot>
        </v-system-bar>

    </v-card>
</template>

<script>
    export default {

        props: {
            color: {default: null},
            disabled: {default: false},
            elevation: {default: null},
            flat: {default: false},
            loading: {default: false},
            outlined: {default: false},
            shaped: {default: false},
            tile: {default: false},
            width: {default: null},
            height: {default: null},
            maxHeight: {default: null},
            titleHtmlClass: {default: null},
        },

        name: 'CsBasicCard',
    }
</script>