<template>
    <div class="bg-white shadow">
        <div v-if="this.$slots.header" class="border-b border-gray-200 px-4 py-5 sm:px-6">
            <slot name="header"></slot>
        </div>
        <div :class="hasTable ? '' : 'px-4 py-5 sm:p-6'">
            <div v-if="this.$slots.left || this.$slots.right"
                 class="grid grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-2 items-center"
            >
                <div class="col-span-1">
                    <slot name="left"></slot>
                </div>
                <div class="col-span-1 text-right md:text-left lg:text-right">
                    <slot name="right"></slot>
                </div>
            </div>
            <slot v-else></slot>
        </div>
        <div v-if="this.$slots.footer" class="bg-gray-50 px-4 py-4 sm:px-6">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props : {
        hasTable : {
            type : Boolean,
            default : false
        }
    },
}
</script>
