<template>
    <div :class="[
            'grid',
            'grid-cols-1',
            'md:grid-cols-2',
            'lg:grid-cols-' + columns,
            'gap-6',
            'relative'
        ]">
        <div v-if="title" class="col-span-full">
            <h5 class="font-medium text-gray-700 dark:text-gray-300 text-2xl">{{ title }}</h5>
        </div>
        <button v-if="this.$root.modeEdit" type="button" title="Edit Element"
            class="text-white bg-blue-700 hover:bg-blue-800 outline-none rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 absolute top-2 right-2">
            <i class="ti ti-edit mx-3 my-2 block"></i>
        </button>
        <slot>
    </div>
</template>

<script>
export default {
    data() {
        return {
        
        };
    },
    props: {
        columns: Number,
        title: String
    },
};
</script>