Layouts

[[If?
    &subject=`[[+layout_title]]`
    &operator=`notempty`
    &then=`id="fb[[*id]]-[[stripAsAlias? &input=`[[+layout_title]]`]]"`
    &toPlaceholder=`fieldset_[[*id]]_[[+unique_idx]]`
]]
[[If?
    &subject=`[[+segment_type]]`
    &operator=`isnot`
    &operand=`none`
    &then=`segment`
    &else=`[[*fb_form_layout:isnot=`inline`:then=`fieldset`]]`
    &toPlaceholder=`segment_[[*id]]_[[+unique_idx]]_parent`
]]
[[If?
    &subject=`[[+force_segment]]`
    &operator=`eq`
    &operand=`1`
    &then=`segment`
    &else=`[[+segment_[[*id]]_[[+unique_idx]]_parent]]`
    &toPlaceholder=`segment_[[*id]]_[[+unique_idx]]`
]]
<fieldset [[+fieldset_[[*id]]_[[+unique_idx]]]] class="ui [[+padding]] [[+segment_[[*id]]_[[+unique_idx]]]] [[+background:setBackground]]">
    [[+legend:notempty=`<legend class="ui [[+form_size]] header">[[+legend]]</legend>`]]
    [[*fb_form_layout:is=`inline`:then=`<span class="equal width fields">`]]
    [[+main]]
    [[*fb_form_layout:is=`inline`:then=`</span>`]]
</fieldset>

[[If?
    &subject=`[[+layout_title]]`
    &operator=`notempty`
    &then=`id="fb[[*id]]-[[stripAsAlias? &input=`[[+layout_title]]`]]"`
    &toPlaceholder=`fieldset_id_[[+unique_idx]]`
]]
[[f?
    &subject=`[[+main]]`
    &operator=`contains`
    &operand=`required`
    &then=`required`
    &toPlaceholder=`required_[[+unique_idx]]`
]]

<div [[+fieldset_id_[[+unique_idx]]]] class="unstackable inline fields [[+required_[[+unique_idx]]]]">
    [[+label:notempty=`<label>[[+label]]</label>`]]
    [[+main]]
</div>

@CHUNK mbSectionSingleColumn

@CHUNK mbSectionContentSidebar

@CHUNK mbSectionSidebarContent

@CHUNK mbSectionTwoColumns

@CHUNK mbSectionThreeColumns

@CHUNK mbSectionFourColumns

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] [[+alignment]] [[+title_inflate]] main container">
        [[+main]]
    </div>
    [[+bg[[+background]].credits]]
</div>

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] equal width grid">
            <div class="row">
                <div class="[[+title_inflate]] main column">[[+main]]</div>
                <div class="[[+sidebar_width]] wide sidebar column">[[+sidebar]]</div>
            </div>
        </div>
    </div>
    [[+bg[[+background]].credits]]
</div>

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] equal width grid">
            <div class="row">
                <div class="[[+sidebar_width]] wide sidebar column">[[+sidebar]]</div>
                <div class="[[+title_inflate]] main column">[[+main]]</div>
            </div>
        </div>
    </div>
    [[+bg[[+background]].credits]]
</div>

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] equal width grid">
            <div class="row">
                <div class="[[+sidebar_width]] wide sidebar column">[[+left]]</div>
                <div class="[[+title_inflate]] main column">[[+main]]</div>
                <div class="[[+sidebar_width]] wide sidebar column">[[+right]]</div>
            </div>
        </div>
    </div>
    [[+bg[[+background]].credits]]
</div>

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui four column [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
                <div class="column">[[+col_3]]</div>
                <div class="column">[[+col_4]]</div>
            </div>
        </div>
    </div>
    [[+bg[[+background]].credits]]
</div>

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui three column [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
                <div class="column">[[+col_3]]</div>
            </div>
        </div>
    </div>
    [[+bg[[+background]].credits]]
</div>

<div [[stripAsAlias:prepend=`id="`:append=`"`? &input=`[[+title]]`]] class="ui vertical stripe segment [[setBackground? &background=`[[+background]]`]]">
    <div class="ui [[+container_type]] container">
        <div class="ui two column [[+responsive:replace=`,== `]] [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="[[+title_inflate]] main column">[[+col_1]]</div>
                <div class="[[+title_inflate]] main column">[[+col_2]]</div>
            </div>
        </div>
    </div>
    [[+bg[[+background]].credits]]
</div>

</div>
<div class="ui [[+container_type]] [[+alignment]] [[+title_inflate]] main breakout container">
    [[+main]]
</div>
<div class="ui [[+layout_settings.container_type]] [[+layout_settings.alignment]] [[+layout_settings.title_inflate]] main container">

<div class="[[+alignment]] row">
    <div class="column">[[+main]]</div>
</div>

<div class="[[+alignment]] row">
    <div class="column">[[+main]]</div>
    <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
</div>

<div class="[[+alignment]] row">
    <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
    <div class="column">[[+main]]</div>
</div>

<div class="[[+alignment]] row">
    <div class="[[+sidebar_width]] wide column">[[+left]]</div>
    <div class="column">[[+main]]</div>
    <div class="[[+sidebar_width]] wide column">[[+right]]</div>
</div>

<div class="[[+alignment]] row">
    <div class="column">[[+col_1]]</div>
    <div class="column">[[+col_2]]</div>
    <div class="column">[[+col_3]]</div>
    <div class="column">[[+col_4]]</div>
</div>

<div class="[[+alignment]] row">
    <div class="column">[[+col_1]]</div>
    <div class="column">[[+col_2]]</div>
    <div class="column">[[+col_3]]</div>
</div>

<div class="[[+alignment]] row">
    <div class="column">[[+col_1]]</div>
    <div class="column">[[+col_2]]</div>
</div>

@CHUNK cbLayoutSegment

[[+main]]

@CHUNK cbLayoutCard

@CHUNK cbLayoutCard

[[+main]]

<div class="ui vertical backyard segment secondary">
    <div class="ui container">
        <div class="ui accordion">
            <div class="title">
                <button class="ui small primary circular icon button" tabindex="[[+idx]]">
                    <i class="plus icon"></i>
                </button>
            </div>
            <div class="content">
                <div class="ui stackable relaxed equal width grid">
                    <section class="column">
                        <h2>[[+layout_title]]</h2>
                        [[+info]]
                    </section>
                    <aside class="[[+sidebar_width]] wide column">
                        <div class="ui nested middle aligned equal width toolbar grid">
                            <div class="nine wide column">
                                <a href="[[++site_url]]manager/?a=resource/update&id=[[*id]]" class="ui tiny basic button">
                                    Edit in MODX
                                </a>
                            </div>
                            <div class="right aligned column">
                                <span data-tooltip="[[%romanesco.patterns.favorite_tooltip]]" data-position="top center">
                                    <i class="disabled heart outline link icon"></i>
                                </span>
                                <span data-tooltip="[[%romanesco.patterns.comment_tooltip]]" data-position="top center">
                                    <i class="disabled comment outline link icon"></i>
                                </span>
                            </div>
                        </div>

                        <div class="ui divider"></div>

                        <h5 class="ui disabled header">ContentBlocks used</h5>

                        <div class="ui list">
                            [[+meta]]
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui vertical stripe pattern segment [[+background:setBackground]]">
    <div class="ui [[+container_type]] [[+alignment]] container">
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonField`
            &then=`setPatternPlaceholders? &cbField=`[[+pattern_name]]` &prefix=`cf_[[+idx]]_[[+unique_idx]]``
        ]]]]
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonLayout`
            &then=`setPatternPlaceholders? &cbLayout=`[[+pattern_name]]` &prefix=`cl_[[+idx]]_[[+unique_idx]]``
        ]]]]

        [[!$cbLayoutPatternPreview:toPlaceholder=`preview_[[+idx]]_[[+unique_idx]]`?
            &preview=`[[+preview]]`
            &code=`[[+code]]`
            &sidebar_width=`[[+sidebar_width]]`
            &pattern_name=`[[+pattern_name]]`
            &pattern_template=`[[+pattern_template]]`
            &raw_tags=`[[+raw_tags]]`
            &rendered_tags=`[[+rendered_tags]]`
            &idx=`[[+idx]]`
            &unique_idx=`[[+unique_idx]]`
        ]]
        
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`contains`
            &operand=`Electron`
            &then=`
                $toolbarPatternElectron?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_status=`[[+pattern_status]]`
                `
            &else=`
                $toolbarPattern?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_template=`[[+pattern_template]]`
                    &pattern_status=`[[+pattern_status]]`
                    &idx=`[[+idx]]`
                    &unique_idx=`[[+unique_idx]]`
                `
        ]]]]

        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`containsnot`
            &operand=`Electron`
            &then=`+preview_[[+idx]]_[[+unique_idx]]`
        ]]]]

        [[+info]]
    </div>
</div>

[[If?
    &subject=`[[+cta_link]]`
    &operator=`notempty`
    &then=`
    <a class="item" href="[[[[If? &subject=`[[+cta_link]]` &operator=`notempty` &then=`~[[+cta_link]]`]]]]">
        <div class="content">
            [[+main]]
        </div>
    </a>
    `
    &else=`[[+main]]`
]]

@CHUNK cbLayoutBackground

<div id="swiper-[[+unique_idx]]" class="swiper[[+mobile_only:eq=`1`:then=`-mobile`]] [[+transition]] [[+inverted:eq=`1`:then=`inverted`]] [[+fullscreen:eq=`1`:then=`fullscreen`]]">
    [[If?
        &subject=`[[+transition]]`
        &operator=`eq`
        &operand=`parallax`
        &then=`<div class="[[setBackground? &background=`[[+background]]`]]" data-swiper-parallax="-25%"></div>`
    ]]
    [[If?
        &subject=`[[+slider_type]]`
        &operator=`inarray`
        &operand=`overview,gallery,cards`
        &then=`[[+main]]`
        &else=`<div class="swiper-wrapper[[+mobile_only:eq=`1`:then=`-mobile`]]">[[+main]]</div>`
    ]]
    [[[[If?
        &subject=`[[+button_position]]`
        &operator=`contains`
        &operand=`inside`
        &then=`$sliderNavButtons?
            &position=`[[+button_position]]`
            &behaviour=`[[+behaviour]]`
            &pagination=`[[+pagination]]`
            &uid=`[[+unique_idx]]`
        `
    ]]]]
</div>

[[[[If?
    &subject=`[[+button_position]]`
    &operator=`contains`
    &operand=`outside`
    &then=`$sliderNavButtons?
        &position=`[[+button_position]]`
        &behaviour=`[[+behaviour]]`
        &pagination=`[[+pagination]]`
        &uid=`[[+unique_idx]]`
    `
]]]]

[[sliderLoadAssets?
    &uid=`[[+unique_idx]]`
    &columns=`[[textToNumber? &input=`[[+cols]]`]]`
    &slidesToScroll=`[[+slides_to_scroll]]`
    &direction=`[[+direction]]`
    &spacing=`[[+spacing]]`
    &behaviour=`[[+behaviour]]`
    &transition=`[[+transition]]`
    &lazyload=`[[+lazyload]]`
    &pagination=`[[+pagination]]`
    &responsive=`[[+responsive]]`
    &mobileOnly=`[[+mobile_only]]`
]]

@CHUNK overviewOuterFluid