<template>
    <template v-for="(element, elementIndex) in elements">
        <div class="container flex justify-end">
            <button v-if="this.$root.modeEdit" type="button" 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" title="Edit Element">
                <i class="ti ti-edit mx-3 my-2 block"></i>
            </button>
        </div>
        <tailwind-jumbotron v-if="element.type == 'jumbotron'" :title="element.title">
            {{ element.text }}
        </tailwind-jumbotron>
        <tailwind-grid v-if="element.type == 'grid'" :columns="element.columns" :title="element.title">
            <dynamic-root :elements="element.elements"></dynamic-root>
        </tailwind-grid>
        <tailwind-link v-if="element.type == 'link'" :link="element.link" :title="element.title" :description="element.description">

        </tailwind-link>
    </template>
</template>

<script>
export default {
    data() {
        return {
        
        };
    },
    props: {
        elements: Array
    },
    components: {
        TailwindJumbotron: Vue.defineAsyncComponent(() =>
            loadModule('/vue/jumbotron.vue', options)
        ),
        TailwindGrid: Vue.defineAsyncComponent(() =>
            loadModule('/vue/grid.vue', options)
        ),
        TailwindLink: Vue.defineAsyncComponent(() =>
            loadModule('/vue/link.vue', options)
        ),
        DynamicRoot: Vue.defineAsyncComponent(() =>
            loadModule('/vue/root.vue', options)
        ),
    },
};
</script>