<template>
    <v-sheet 
        :height="height"
        :width="width"
        :color="color"
        class="d-flex align-center justify-center text-center"
    >
        <div>
            <span 
                :class="messageHtmlClass"
                v-html="__(message)"
            >
            </span>
            
            <div>
                <slot></slot>
            </div>
        </div>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            height: {required: true},
            width: {default: '100%'},
            messageHtmlClass: {default: 'grey--text'},
            message: {default: ''},
            color: {default: null}
        },

        name: 'CsCenteredAlert',
    }
</script>