<script lang="ts">
    import modules from "./modules"

    export let content: Content
</script>

{#if content?.pageBuilder && content?.pageBuilder?.length}
    <div class="page-builder">
        {#each content.pageBuilder as row}
            <div class="page-builder-row">
                {#each Object.entries(row.columns) as [index, column]}
                    {#if row.publish}
                        {#if column.module || (column.html && column.html !== "")}
                            <div class="{column.width !== '' ? `page-builder-col-${column.width}` : ''}">
                                {#if column.html}
                                    {@html column.html}
                                {/if}
                                {#if column.module}
                                    <svelte:component this="{modules[column.module]}" content="{content}" />
                                {/if}
                            </div>
                        {/if}
                    {/if}
                {/each}
            </div>
        {/each}
    </div>
{/if}
