{$block_id = $data->getId()}
{$is_horizontal = ifset($data->data['is_horizontal'], false)}
{$is_columns = ifset($data->data['is_complex'], 0) === 'only_columns'}
{$is_indestructible = ifset($data->data['indestructible'], false)}
{$static_main = "js-seq-wrapper"}
{$add_button_class = 'js-add-block'}
{if $block_id}
    {$add_button_class = 'js-add-element'}
{/if}
{if $is_columns}
    {$add_button_class = 'js-add-column'}
{/if}
{$is_element = !!$block_id}

<div class="{$static_main} {if $is_horizontal}hseq-wrapper{else}vseq-wrapper{/if}" data-static="{$static_main} {if $is_horizontal}hseq-wrapper{else}vseq-wrapper{/if}" {if $block_id}data-block-id="{$block_id|escape}"{else}id="js-global-seq"{/if} data-page-id="{$data->getPageId()}">
    {foreach $children as $c}
        {$disabled = $c['data']->data['disabled']|default:false}
        {$hidden = $c['data']->data['hidden']|default:false}
        {function _add_button value='1'}
            {if !$disabled}
                {if !$is_indestructible}
                    {if $is_columns}
                        <div class="dropdown">
                            <a class="btn button smaller">
                                <span class="flexbox"><svg width="15" height="15" viewBox="0 0 15 15" fill="white" xmlns="http://www.w3.org/2000/svg"><rect x="6" width="3" height="15" rx="1"/><rect y="6" width="15" height="3" rx="1"/></svg></span>
                            </a>
                        </div>
                    {elseif $block_id}
                        <div class="dropdown" id="dropdown-{$value}-{$c.id|escape}">
                            <a class="btn button smaller circle dropdown-toggle without-arrow">
                                <span class="flexbox"><svg width="15" height="15" viewBox="0 0 15 15" fill="white" xmlns="http://www.w3.org/2000/svg"><rect x="6" width="3" height="15" rx="1"/><rect y="6" width="15" height="3" rx="1"/></svg></span>
                            </a>
                            <div class="dropdown-body">
                                <div class="animation-box box">
                                    <i class="fas fa-spinner wa-animation-spin speed-1000"></i>
                                </div>
                            </div>
                        </div>
                    {else}
                        <a class="btn button smaller">
                            <span class="flexbox"><svg width="15" height="15" viewBox="0 0 15 15" fill="white" xmlns="http://www.w3.org/2000/svg"><rect x="6" width="3" height="15" rx="1"/><rect y="6" width="15" height="3" rx="1"/></svg></span>
                        </a>
                    {/if}
                {/if}
            {/if}
        {/function}

        <div class="seq-child{if $is_element} is-element{/if}" data-block-id="{$c.id|escape}" data-static="seq-child"{if $disabled} data-disabled="1"{/if}>
            {if $is_horizontal}
                <div class="seq-block-delimeter hseq-block-delimeter-top"></div>
                <div class="seq-block-delimeter hseq-block-delimeter-left seq-block-delimeter-before {$add_button_class}">
                    {_add_button}
                </div>
                    {$c.html}
                <div class="seq-block-delimeter hseq-block-delimeter-right seq-block-delimeter-after {$add_button_class}">
                    {_add_button value="2"}
                </div>
                <div class="seq-block-delimeter hseq-block-delimeter-bottom"></div>
            {else}
                <div class="seq-block-delimeter vseq-block-delimeter-top seq-block-delimeter-before {$add_button_class}">
                    {_add_button}
                </div>
                <div class="seq-block-delimeter vseq-block-delimeter-left">
                </div>
                    {$c.html}
                <div class="seq-block-delimeter vseq-block-delimeter-right">
                </div>
                <div class="seq-block-delimeter vseq-block-delimeter-bottom seq-block-delimeter-after {$add_button_class}">
                    {_add_button value="2"}
                </div>
            {/if}
            {if !$is_element}
                <div class="seq-block-overlay{if !$hidden} hidden{/if}">
                    <div class="content">
                        <div><i class="fas fa-eye-slash"></i></div>
                        <div class="text">[`This block is hidden`]</div>
                    </div>
                </div>
            {/if}
        </div>
    {/foreach}

    <div class="empty-seq">
        {if $block_id}
        <div class="seq-block-delimeter seq-block-delimeter-empty">
        </div>
        <div class="empty-seq-add {if $is_columns}js-add-column{else}js-add-element{/if}">
            <div class="dropdown" id="dropdown-empty-{$block_id}">
                <a class="btn button smaller circle dropdown-toggle without-arrow">
                    <span class="flexbox"><svg width="15" height="15" viewBox="0 0 15 15" fill="white" xmlns="http://www.w3.org/2000/svg"><rect x="6" width="3" height="15" rx="1"/><rect y="6" width="15" height="3" rx="1"/></svg></span>
                </a>
                <div class="dropdown-body">
                    <div class="animation-box box">
                        <i class="fas fa-spinner wa-animation-spin speed-1000"></i>
                    </div>
                </div>
            </div>
        </div>
        {else}
        <div class="js-add-block">
            <a class="btn button small light-gray">
                <span class="flexbox custom-mr-4"><svg width="15" height="15" viewBox="0 0 15 15" fill="white" xmlns="http://www.w3.org/2000/svg"><rect x="6" width="3" height="15" rx="1"/><rect y="6" width="15" height="3" rx="1"/></svg></span>&nbsp;<span>[`Add block to page`]</span>
            </a>
        </div>
        {/if}
    </div>

</div>

<script>(function() { "use strict";
    var block_id = {$block_id|json_encode};
    var $wrapper;
    if (block_id) {
        $wrapper = $('.js-seq-wrapper[data-block-id="'+block_id+'"]');
    } else {
        $wrapper = $('#js-global-seq');
    }

    var controller = siteVseqController({
        $wrapper
    });
})();</script>