Molecules

<[[+level]] id="[[+value:stripAsAlias]]" class="ui [[+alignment]] header">
    [[+value]]
</[[+level]]>
[[-<a class="anchor" href="[[~[[*id]]]]#[[+value:stripAsAlias:lcase]]"><i class="small linkify icon"></i></a>]]

<[[+level]] class="ui [[+alignment]] header">
    [[+value]]
</[[+level]]>
<p class="subtitle">
    [[+subtitle]]
</p>

<[[+level]] class="ui [[+alignment]] [[+icon_position]] header">
    <i class="[[+icon_circular:is=`1`:then=`circular`]] [[+icon_class]]"></i>
    <span class="content">
        [[+value]]
        [[+subtitle:notempty=`<span class="sub header">[[+subtitle]]</span>`]]
    </span>
</[[+level]]>

<[[+level]] class="ui [[+alignment]] [[+icon_position]] header">
    <img class="ui image" src="[[+url]]" alt="[[+alt:htmlent]]">
    <span class="content">
        [[+value]]
        [[+subtitle:notempty=`<span class="sub header">[[+subtitle]]</span>`]]
    </span>
</[[+level]]>

<[[+title_hierarchy]] class="ui [[+title_classes]] [[+classes]] header">
    [[+[[+title_field]]:empty=`[[+pagetitle]]`]]
</[[+title_hierarchy]]>
<p class="subtitle">
    [[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]
</p>

<[[+title_hierarchy]] class="ui [[+title_classes]] [[+classes]] header">
    <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
</[[+title_hierarchy]]>
<p class="subtitle">
    [[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]
</p>

<a href="[[+link]]" class="ui [[+classes]] content image" [[+link_rel:replace=`,== `:prepend=`rel="`:append=`"`]] [[+attributes]]>
    [[$imgResponsive? &uid=`[[+url]]`]]
    [[If?
        &subject=`[[+credits]][[+caption]]`
        &operator=`notempty`
        &then=`<div class="caption">[[+caption]][[+credits:stripTags=`<em>,<strong>`:prepend=`<span class="credits meta">© `:append=`</span>`]]</div>`
    ]]
</a>

[[modifiedIf?
    &subject=`[[+extension:lcase]]`
    &operator=`EQ`
    &operand=`svg`
    &then=`imageSVG`
    &else=`imageBasic[[+link:notempty=`Link`]]`
    &toPlaceholder=`img_tpl`
]]
[[$[[+img_tpl]]?
    &url=`[[+crops.default.url:empty=`[[+url]]`]]`
    &width=`[[+crops.default.width:empty=`[[+width]]`]]`
    &height=`[[+crops.default.height:empty=`[[+height]]`]]`
    &classes=`rounded [[+classes:replace=`,== `:empty=`[[+img_size]] [[+options]] [[+position]]`]]`

    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
    &uid=`[[+unique_idx]]`
]]

[[+url:notempty=`
[[[[modifiedIf?
    &subject=`[[+extension:lcase]]`
    &operator=`EQ`
    &operand=`svg`
    &then=`svgSanitize? &file=`[[+url]]` &title=`[[+alt]]``
    &else=`$imgResponsiveGalleryCaption? &uid=`[[+unique_idx]]_[[+idx]]``
]]]]
`]]

<div id="markdown" class="ui vertical stripe segment [[setBackground? &background=`[[+background:empty=`[[++layout_background_default]]`]]`]]">
    <div class="ui [[+container_type]] [[+alignment]] container">
        [[$contentMarkdown]]
    </div>
</div>

<script>
    event.preventDefault();
    var formData = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "contact",
        data: formData,
        dataType: "json",
        encode: true,
    }).done(function (data) {
        // If we receive a success message, show an alert.
        if (data.success) {
            console.log(data.success);

            // $('body')
            //     .toast({
            //         message: data.message,
            //         class: 'success',
            //         showIcon: 'checkmark',
            //         //displayTime: 0,
            //         //closeIcon: true
            //     })
            // ;
            $('.ui.form#form-contact-example .dimmer').addClass('active');

            setTimeout(function () {
                $('.ui.form#form-contact-example > div')
                    .replaceWith('<div class="ui success message">' + data.message + '<\/div>')
                ;
            }, 2000)

        } else {
            console.log(data.errors);

            $.each(data.errors, function(key, item) {
                console.log(item);

                $('body')
                    .toast({
                        message: key + '<br>' + item,
                        class: 'error',
                        showIcon: 'exclamation circle',
                        //displayTime: 0,
                        closeIcon: true
                    })
                ;

                //$("#" + key).parent('.field').addClass('error');
            });


        }
    });
</script>

<div class="g-recaptcha" data-sitekey="[[+site_key]]"></div>
<script>
    window.addEventListener('DOMContentLoaded', function () {
        if (window.grcLoaderAdded) {
            return;
        }
        window.grcLoaderAdded = true;

        // Just to make sure (e.g. IE10)
        if (window.NodeList && !NodeList.prototype.forEach) {
            NodeList.prototype.forEach = function (callback, thisArg) {
                thisArg = thisArg || window;
                for (var i = 0; i < this.length; i++) {
                    callback.call(thisArg, this[i], i, this);
                }
            };
        }

        var availableInputs = document.querySelectorAll('input, select');
        if (!availableInputs || !availableInputs.forEach) {
            return;
        }

        var loadGrcOnInteraction = function (ev) {
            // Remove the event listeners; no longer need them after being called once
            this.removeEventListener('focus', loadGrcOnInteraction);
            this.removeEventListener('input', loadGrcOnInteraction);
            this.removeEventListener('change', loadGrcOnInteraction);

            // Avoid loading recaptcha more than once globally per page
            if (window.grcLoaded) { return; }
            window.grcLoaded = true;

            // Inject recaptcha into the page head
            var head = document.getElementsByTagName('head')[0]
            var script = document.createElement('script')
            script.src = 'https://www.google.com/recaptcha/api.js?hl=[[++cultureKey]]'
            head.appendChild(script)
        }

        // Listen to a few different events. Focus would be ideal, but that doesn't trigger on custom selects. input/change are fallbacks.
        availableInputs.forEach(function (input) {
            input.addEventListener('focus', loadGrcOnInteraction);
            input.addEventListener('input', loadGrcOnInteraction);
            input.addEventListener('change', loadGrcOnInteraction);
        });
    });
</script>

<div id="rc-root-[[+action_key]]-[[+form_id]]">
    <input type="hidden" name="[[+token_key]]">
    <input type="hidden" name="[[+action_key]]" value="[[+form_id]]">
    <input type="hidden" name="fb[[*id]]-submit" value="1">
</div>

<p class="recaptcha help">
    [[%formblocks.form.recaptchav3_legal_notice]]
</p>

[[++formblocks.frontend_validation:isnot=`1`:then=`
<script>
    window.addEventListener('DOMContentLoaded', function() {

        var rcr = document.getElementById('rc-root-[[+action_key]]-[[+form_id]]');
        if (!rcr) {
            console.error('recaptcha root not found');
            return;
        }
        var form = rcr.closest('form');
        if (!form) {
            console.error('recaptcha root does not appear to be inside a form');
            return;
        }

        form.addEventListener('submit', function(e) {
            e.preventDefault();

            grecaptcha.ready(function() {
                grecaptcha.execute('[[+site_key]]', {action: '[[+form_id]]'}).then(function(token) {
                    rcr.querySelector('[name="[[+token_key]]"]').value = token;
                    form.submit();
                });
            });
        });
    });
</script>
`]]

var rcr = document.getElementById('rc-root-[[+action_key]]-[[+form_id]]');
if (!rcr) {
    console.error('recaptcha root not found');
    return;
}
var form = rcr.closest('form');
if (!form) {
    console.error('recaptcha root does not appear to be inside a form');
    return;
}

e.preventDefault();
grecaptcha.ready(function() {
    grecaptcha.execute('[[+site_key]]', {action: '[[+form_id]]'}).then(function(token) {
        rcr.querySelector('[name="[[+token_key]]"]').value = token;
        form.submit();
    });
});

[[+field_name:stripString=`?`:stripWords=`[[$fbStripWordsLabel]]`:toPlaceholder=`label`]]
[[+fb[[+id]]-[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias]]:nl2br:empty=``:toPlaceholder=`value`]]

<strong>[[+label]]:</strong><br/>
[[+value:replace=`,==<br/>`]][[+value:contains=`[[+option_other_value]]`:then=`, [[%formblocks.email.other_namely]] [[+fb[[+id]]-[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias]]-other]]`]]<br/><br/>

[[!$fbEmailRow]]

[[!$fbEmailRow]]

<strong>[[+field_name]]:</strong><br/>

<i>[[+label_start]]:</i><br/>
[[+fb[[+id]]-[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias]]-start:empty=``]]<br/><br/>

<i>[[+label_end]]</i><br/>
[[+fb[[+id]]-[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias]]-end:empty=``]]<br/><br/>

<strong>Email:</strong><br>
[[+fb[[+id]]-email:empty=``]]<br><br>

<h2>[[+title]]</h2><br/>

<div id="fb[[*id]]-accept-terms" class="required inline field [[!If? &subject=`[[+fb[[*id]].error.fb[[*id]]-accept-terms]]` &operator=`notempty` &then=`error`]]">
    <div class="ui field checkbox">
        <input type="checkbox"
               name="fb[[*id]]-accept-terms[]"
               id="fb[[*id]]-accept-terms-1"
               value="1"
               tabindex="0"
               class="hidden"
               [[!+fb[[*id]].fb[[*id]]-accept-terms:FormItIsChecked=`1`]]>
        <label>[[+field_text:replace=`[[+link]]==<a href="[[~[[+link_id]]]]">[[+link_text]]</a>`]]</label>
    </div>
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]

<div class="ui calendar [[+date_type]] field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!If? &subject=`[[+fb[[*id]].error.[[+name]]]]` &operator=`notempty` &then=`error`]] [[If? &subject=`[[+field_required]]` &operator=`EQ` &operand=`1` &then=`required`]]">
    <label for="[[+name]]">[[+field_name:stripWords=`[[$fbStripWordsLabel]]`]]</label>
    <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" name="[[+name]]" id="[[+name]]" value="[[!+fb[[*id]].[[+name]]]]" placeholder="[[+field_placeholder]]">
    </div>
    [[+fb[[*id]].error.[[+name]]]]
    [[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`]]
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]

<div id="[[+name]]" class="[[+field_cols]] [[If? &subject=`[[+field_required]]` &operator=`EQ` &operand=`1` &then=`required`]] equal width [[++cultureKey]] date range fields">
    <input type="hidden" name="field_name" value="[[+field_name]]">
    <input type="hidden" name="label_start" value="[[+label_start]]">
    <input type="hidden" name="label_end" value="[[+label_end]]">
    <div class="field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!If? &subject=`[[+fb[[*id]].error.[[+name]]-start]]` &operator=`notempty` &then=`error`]]">
        <label for="[[+name]]-start">[[+label_start]]</label>
        <div class="ui calendar date range start">
            <div class="ui input left icon">
                <i class="calendar alternate outline icon"></i>
                <input type="text" name="[[+name]]-start" id="[[+name]]-start" value="[[!+fb[[*id]].[[+name]]-start]]" placeholder="[[+placeholder_start]]">
            </div>
        </div>
        [[+fb[[*id]].error.[[+name]]-start]]
    </div>
    <div class="field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!If? &subject=`[[+fb[[*id]].error.[[+name]]-end]]` &operator=`notempty` &then=`error`]]">
        <label for="[[+name]]-end">[[+label_end]]</label>
        <div class="ui calendar date range end">
            <div class="ui input left icon">
                <i class="calendar alternate outline icon"></i>
                <input type="text" name="[[+name]]-end" id="[[+name]]-end" value="[[!+fb[[*id]].[[+name]]-end]]" placeholder="[[+placeholder_end]]">
            </div>
        </div>
        [[+fb[[*id]].error.[[+name]]-end]]
    </div>
</div>

[[+field_helptext:notempty=`<div class="help">[[+field_helptext]]</div>`]]

<div class="field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!If? &subject=`[[+fb[[*id]].error.fb[[*id]]-email]]` &operator=`notempty` &then=`error`]] required">
    <label for="fb[[*id]]-email">[[+field_name:stripWords=`[[$fbStripWordsLabel]]`]]</label>
    <input type="email" name="fb[[*id]]-email" id="fb[[*id]]-email" value="[[!+fb[[*id]].fb[[*id]]-email]]" placeholder="[[+field_placeholder]]">
    [[+fb[[*id]].error.fb[[*id]]-email]]
    [[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`]]
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]

<div class="file-upload field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!If? &subject=`[[+fb[[*id]].error.[[+name]]]]` &operator=`notempty` &then=`error`]] [[If? &subject=`[[+field_required]]` &operator=`EQ` &operand=`1` &then=`required`]]">
    <label for="[[+name]]">[[+field_name:stripWords=`[[$fbStripWordsLabel]]`]]</label>
    [[[[If?
        &subject=`[[+upload_limit]]`
        &operator=`GT`
        &operand=`1`
        &then=`$fbInputFileMultiple`
    ]]]]
    [[!If?
        &subject=`[[+upload_limit]]`
        &operator=`EQ`
        &operand=`1`
        &then=`<input type="file" name="[[+name]]" id="[[+name]]">`
    ]]
    [[+fb[[*id]].error.[[+name]]]]
    [[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`]]
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]

<input type="hidden" name="[[+name]]" id="[[+name]]" class="hidden" value="[[+field_value]]">

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]

<div class="field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!If? &subject=`[[+fb[[*id]].error.[[+name]]]]` &operator=`notempty` &then=`error`]] [[If? &subject=`[[+field_required]]` &operator=`EQ` &operand=`1` &then=`required`]]">
    <label for="[[+name]]">[[+field_name:stripWords=`[[$fbStripWordsLabel]]`]]</label>
    <textarea rows="[[+field_rows]]" name="[[+name]]" id="[[+name]]" placeholder="[[+field_placeholder]]">[[!+fb[[*id]].[[+name]]]]</textarea>
    [[+fb[[*id]].error.[[+name]]]]
    [[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`]]
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]

<div class="field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!If? &subject=`[[+fb[[*id]].error.[[+name]]]]` &operator=`notempty` &then=`error`]] [[If? &subject=`[[+field_required]]` &operator=`EQ` &operand=`1` &then=`required`]]">
    <label for="[[+name]]">[[+field_name:stripWords=`[[$fbStripWordsLabel]]`]]</label>
    <input type="[[+field_type]]" name="[[+name]]" id="[[+name]]" value="[[!+fb[[*id]].[[+name]]]]" placeholder="[[+field_placeholder]]">
    [[+fb[[*id]].error.[[+name]]]]
    [[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`]]
</div>

[[!+fb[[*id]].error.fb[[*id]]-math:toPlaceholder=`math_error`]]

<div class="field [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[!+math_error:notempty=`error`]] required">
    <label for="fb[[*id]]-math">
        <strong>[[!+fb[[*id]].fb[[*id]]-op1]]</strong>
        <i class="small fitted [[!+fb[[*id]].fb[[*id]]-operator:is=`-`:then=`minus`:else=`plus`]] icon"></i>
        <strong>[[!+fb[[*id]].fb[[*id]]-op2]]</strong>
        <i class="small fitted equals icon"></i>
    </label>
    <input type="text" name="fb[[*id]]-math" id="fb[[*id]]-math" value="[[!+fb[[*id]].fb[[*id]]-math]]" />
    <input type="hidden" name="fb[[*id]]-op1" value="[[!+fb[[*id]].fb[[*id]]-op1]]" />
    <input type="hidden" name="fb[[*id]]-op2" value="[[!+fb[[*id]].fb[[*id]]-op2]]" />
    <input type="hidden" name="fb[[*id]]-operator" value="[[!+fb[[*id]].fb[[*id]]-operator]]" />
    [[!+math_error:notempty=`<span class="help error">[[!+math_error]] [[!+math_error:contains=`!`:then=`Grab a calculator and fix yourself.`]]</span>`]]
    [[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`]]
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]
[[+field_type:contains=`multiple`:then=`multiple`:toPlaceholder=`multiple`]]

<div class="[[If? &subject=`[[+field_required]]` &operator=`EQ` &operand=`1` &then=`required`]] [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] field [[!If? &subject=`[[+fb[[*id]].error.[[+name]]]]` &operator=`notempty` &then=`error`]]">
    <label for="[[+name]]">[[+field_name]]</label>
    <select name="[[+name]][[+multiple:notempty=`[]`]]" id="[[+name]]" class="ui [[+field_type:empty=`dropdown`]]" [[+multiple]]>
        <option value="">[[+option_placeholder]]</option>
        [[+rows]]
    </select>
    [[+fb[[*id]].error.[[+name]]]]
    [[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`]]
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]
[[+field_helptext:notempty=`<span class="help">[[+field_helptext]]</span>`:toPlaceholder=`help`]]
[[!+fb[[*id]].[[+name]]:contains=`[[+option_other_value]]`:then=`checked`:toPlaceholder=`check_other`]]

<div id="[[+name]]" class="[[If? &subject=`[[+field_required]]` &operator=`EQ` &operand=`1` &then=`required`]] [[+option_layout:empty=`grouped`]] [[+field_layout:is=`inherit`:then=`[[+form_layout]]`:else=`[[+field_layout]]`]] [[+field_type]] fields [[!If? &subject=`[[+fb[[*id]].error.[[+name]]]]` &operator=`notempty` &then=`error`]]">
    <label for="[[+name]]">
        [[+field_name]]
    </label>

    [[+helptext_position:eq=`top`:then=`[[+help]]`]]

    [[+rows]]

    [[+option_other:is=`1`:then=`
    <div class="field">
        <div class="ui collapsible [[+checkbox_type:empty=`[[+field_type]]`]] checkbox">
            <input type="[[+field_type]]"
                   name="[[+name]][[+field_type:is=`checkbox`:then=`[]`]]"
                   id="[[+name]]-last"
                   class="hidden"
                   value="[[+option_other_value]]"
                   tabindex="[[+total:add=`1`]]"
                   data-group="no-group"
                   data-target="[[+name]]-other"
                   [[!+fb[[*id]].[[+name]]:FormItIsChecked=`[[+option_other_value]]`]]
                   [[+check_other]]>
            <label>[[+option_other_value]]</label>
        </div>
    </div>

    <div id="[[+name]]-other" class="field [[+check_other:is=``:then=`hidden`]]">
        <input type="text" name="[[+name]]-other" value="[[!+fb[[*id]].[[+name]]-other]]" placeholder="[[+option_placeholder]]">
    </div>
    `]]

    [[+fb[[*id]].error.[[+name]]]]
    [[+helptext_position:eq=`bottom`:then=`[[+help]]`]]
</div>

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput=`fb[[+id]]-`:toPlaceholder=`name`]]

<input id="[[+name]]" type="hidden" name="[[+name]]" value="[[!+[[+name]]]]">
[[+[[+name]]-other:notempty=`<input id="[[+name]]-other" type="hidden" name="[[+name]]-other" value="[[!+[[+name]]-other]]">`]]

[[!$fbStoreRow]]

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput=`fb[[+id]]-`:toPlaceholder=`name`]]

<input id="[[+name]]-start" type="hidden" name="[[+name]]-start" value="[[!+[[+name]]-start]]">
<input id="[[+name]]-end" type="hidden" name="[[+name]]-end" value="[[!+[[+name]]-end]]">

<input id="fb[[+id]]-email" type="hidden" name="fb[[+id]]-email" value="[[!+fb[[+id]]-email]]">

<input id="step-[[+id]]" type="hidden" name="step-[[+id]]" value="[[!+step-[[+id]]]]">

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]
[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:replace=`-==`]]: {
    identifier: '[[+name]]',
    rules: [
        [[+field_type:is=`email`:then=`
        {
            type   : 'email',
            prompt : '[[!$fbValidationPrompt:stripForJS? &type=`email`]]'
        },
        `]]
        [[+field_type:is=`url`:then=`
        {
            type   : 'url',
            prompt : '[[!$fbValidationPrompt:stripForJS? &type=`url`]]'
        },
        `]]
        [[+field_type:is=`number`:then=`
        {
            type   : 'number',
            prompt : '[[!$fbValidationPrompt:stripForJS? &type=`number`]]'
        },
        `]]
        [[+field_type:is=`password`:then=`
        {
            type   : 'minLength[8]',
            prompt : '[[!$fbValidationPrompt:stripForJS? &type=`password`]]'
        },
        `]]
        {
            type   : 'empty',
            prompt : '[[!$fbValidationPrompt:stripForJS]]'
        }
    ]
},

[[!$fbValidationRow]]

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:fbPrefixOutput:toPlaceholder=`name`]]
[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:replace=`-==`]]start: {
    identifier: '[[+name]]-start',
    rules: [{
        type   : 'empty',
        prompt : '[[!$fbValidationPrompt:stripForJS? &type=`date_start`]]'
    }]
},
[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:replace=`-==`]]end: {
    identifier: '[[+name]]-end',
    rules: [{
        type   : 'empty',
        prompt : '[[!$fbValidationPrompt:stripForJS? &type=`date_end`]]'
    }]
},

[[+field_name_html:empty=`[[+field_name]]`:fbStripAsAlias:replace=`-==`]]: {
    identifier: 'fb[[*id]]-email',
    rules: [{
        type   : 'email',
        prompt : '[[!$fbValidationPrompt:stripForJS? &name=`fb[[*id]]-email` &type=`email`]]'
    }]
},

math: {
    identifier: 'fb[[*id]]-math',
    rules: [
        {
            type   : 'empty',
            prompt : '[[!$fbValidationPrompt:stripForJS? &name=`fb[[*id]]-math` &type=`math`]]'
        },{
            type   : 'number',
            prompt : '[[!$fbValidationPrompt:stripForJS? &name=`fb[[*id]]-math` &type=`number`]]'
        }
    ]
},

terms: {
    identifier: 'fb[[*id]]-accept-terms-1',
    rules: [{
        type   : 'checked',
        prompt : '[[!$fbValidationPrompt:stripForJS? &name=`fb[[*id]]-accept-terms` &type=`terms`]]'
    }]
},

<div class="ui [[+classes]] list">
    [[migxLoopCollection?
        &packageName=`romanescobackyard`
        &classname=`rmExternalLink`
        &where=`{"resource_id":"[[*id]]"}`
        &sortConfig=`[{"sortby":"number","sortdir":"ASC"}]`
        &tpl=`externalNavItemList`
    ]]
</div>

<div class="ui grid container">
    <div class="center aligned column">
        <nav class="ui pagination menu" role="navigation">
            [[!+[[+prefix]].page.nav]]
        </nav>
    </div>
</div>

<script defer src="assets/components/pdotools/js/pdopage.min.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        pdoPage.initialize([[+config]]);
    });
</script>

[[pdoCrumbs?
    &showHome=`1`
    &tplWrapper=`breadcrumbOuter`
    &tpl=`breadcrumbRow`
    &tplHome=`breadcrumbHome`
    &tplCurrent=`breadcrumbCurrent`
    &outputSeparator=``
    [[+alias_visibility:isnot=`1`:then=`&where=`[{"alias_visible:!=":"0"}]``]]
]]

<nav id="menu" class="ui [[++navbar_size:default=`large`]] secondary [[++navbar_sticky:is=`1`:then=`sticky`]] menu">
    <div class="ui container">
        <div class="item branding">
            [[[[modifiedIf?
                &subject=`logoTheme`
                &operator=`iselement`
                &operand=`chunk`
                &then=`$logoTheme`
                &else=`$logo`
            ]]]]
        </div>

        [[[[If?
            &subject=`[[++navbar_level]]`
            &operator=`lte`
            &operand=`1`
            &then=`$mainNavItems? &classes=`right menu``
            &else=`$mainNavItemsDropdown? &classes=`right menu``
        ]]]]

        [[$mainNavItemsTheme]]

        <div class="item toc">
            <button class="ui right labeled icon button">
                <i class="sidebar icon"></i>
                <span>[[%romanesco.menu.toc]]</span>
            </button>
        </div>
    </div>
</nav>

<div class="[[+classes]]">
    [[pdoMenu?
        &startId=`0`
        &level=`1`
        &levelClass=`level-`
        &resources=`[[+excluded_resources]]`
        &tplOuter=`navWrapper`
        &tpl=`navItem`
    ]]
</div>

<ul id="menu-accordion">
    [[!pdoMenu?
        &startId=`0`
        &level=`[[+level:empty=`[[++navbar_level]]`]]`
        &levelClass=`level-`
        &selfClass=`current`
        &resources=`[[+excluded_resources]]`

        &tplOuter=`navWrapper`
        &tpl=`navItemAccordionParent`
        &tplParentRow=`navItemAccordionParent`
        &tplParentRowActive=`[email protected]`
        &tplInnerRow=`navItemAccordion`

        &checkPermissions=`list`
        &cache=`1`
        &cache_key=`[[!+modx.user.id:memberof=`[[++romanesco.member_groups_frontend]]`:then=`nav_[[*context_key]]_member`:else=`nav_[[*context_key]]_anonymous`]]`
    ]]
</ul>

<ul id="menu-dropdown" class="[[+classes]]">
    [[pdoMenu?
        &startId=`0`
        &level=`[[++navbar_level:default=`2`]]`
        &levelClass=`level-`
        &selfClass=`current`
        &resources=`[[+excluded_resources]]`
        &tplOuter=`navWrapper`
        &tpl=`navItemDropdownParent`
        &tplCategoryFolder=`navItemDropdownCategory`
        &tplInner=`navWrapper`
        &tplInnerRow=`navItemDropdown`
    ]]
</ul>

<nav id="menu-vertical" class="ui [[++navbar_size:default=`large`]] secondary vertical [[++navbar_level:lte=`1`:then=`inverted`:else=`accordion`]] menu" role="navigation">
    <div class="item branding">
        [[[[modifiedIf?
            &subject=`logoTheme`
            &operator=`iselement`
            &operand=`chunk`
            &then=`$logoTheme? &classes=`inverted``
            &else=`$logo? &classes=`inverted``
        ]]]]
    </div>

    [[[[If?
        &subject=`[[++navbar_level]]`
        &operator=`lte`
        &operand=`1`
        &then=`$mainNavItems`
        &else=`$mainNavItemsAccordion`
    ]]]]

    [[$mainNavItemsTheme]]

    <div class="item toc">
        <button class="ui right labeled inverted basic icon button">
            <i class="sidebar icon"></i>
            <span>[[%romanesco.menu.toc]]</span>
        </button>
    </div>
</nav>

<nav id="off-canvas" class="ui right inverted vertical accordion wide sidebar menu">
    <div class="item home">
        <a href="[[~[[++site_start]]]]" class="ui image brand badge">
            [[%romanesco.menu.brand]]
        </a>
        <button class="ui basic inverted close icon button" title="[[%romanesco.menu.close_title]]">
            <i class="large close icon"></i>
        </button>
    </div>

    [[[[++navbar_level:lte=`1`:then=`$mainNavItemsAccordion? &level=`3``]]]]

    [[$offCanvasNavItemsTheme]]
</nav>

<nav id="submenu" class="ui large inverted pointing menu">
    <div class="ui container">
        [[pdoMenu?
            &parents=`[[UltimateParent]]`
            &resources=`[[+excluded_resources]]`
            &level=`1`
            &tplOuter=`navWrapper`
            &tpl=`navItem`
            &hideSubMenus=`1`
        ]]
    </div>
</nav>

<a id="submenu-header" class="ui tiny header for submenu-[[++submenu_type:stripString=`[[++sidebar_position]] `]]" href="[[~[[UltimateParent]]]]">
    [[pdoField?
        &id=`[[UltimateParent]]`
        &field=`menutitle`
        &default=`pagetitle`
    ]]
</a>
<nav id="submenu" class="ui [[++navbar_size:default=`large`]] [[++submenu_type]] vertical fluid [[+sticky]] menu">
    [[pdoMenu?
        &parents=`[[UltimateParent]]`
        &resources=`[[+excluded_resources]]`
        &level=`[[++submenu_level]]`
        &tplOuter=`navWrapper`
        &tpl=`navItem`
        &tplParentRowActive=`navItemInnerWrapper`
        &tplInnerRow=`navItemInner`
        &hideSubMenus=`1`
        &countChildren=`[[++submenu_childcount]]`
    ]]
</nav>

[[pdoMenu?
    &parents=`[[*id]]`
    &level=`1`
    &tplOuter=`@INLINE [[+wrapper]]`
    &tpl=`@INLINE 1`
    &hideSubMenus=`1`
    &toPlaceholder=`has_children`
]]
[[+has_children:isnot=``:then=`[[*id]]`:else=`[[*parent]]`:toPlaceholder=`back_button_id`]]

[[[[getResourceLevel:gte=`[[++navbar_level]]`:then=`
    pdoMenu?
        &parents=`[[+has_children:is=``:then=`[[*parent:empty=`-1`]]`:else=`[[*id]]`]]`
        &resources=`[[+excluded_resources]]`
        &level=`1`
        &tplOuter=`subNavVerticalWrapper`
        &tpl=`navItem`
        &tplParentRowActive=`navItemInnerWrapper`
        &tplInner=`navWrapper`
        &tplInnerRow=`navItemInner`
        &hideSubMenus=`1`
        &countChildren=`[[++submenu_childcount]]`
    `
]]]]

[[++submenu_locality:eq=`current`:then=`
<div id="submenu-header" class="ui equal width middle aligned grid">
    <div class="column">
        <div class="ui tiny header">
            [[pdoField?
                &id=`[[+back_button_id]]`
                &field=`menutitle`
                &default=`pagetitle`
            ]]
        </div>
    </div>
    [[If?
        &subject=`[[*id:eq=`[[UltimateParent]]`:then=`1`]][[#[[*parent]].hidemenu]]`
        &operator=`empty`
        &then=`
        <div class="compact column">
            <a class="ui [[++submenu_type:containsnot=`regular`:and:containsnot=`tabular`:then=`very`]] basic icon button"
               title="[[%romanesco.submenu.level_up]]"
               href="[[~[[*parent]]]]">
                <i class="up arrow icon"></i>
            </a>
        </div>`
    ]]
</div>
`]]

<nav id="submenu" class="ui [[++navbar_size:default=`large`]] [[++submenu_type]] vertical fluid [[+sticky]] menu">
    [[+wrapper]]
</nav>

[[pdoMenu?
    &parents=`[[If? &subject=`[[+resources]]` &operator=`notempty` &then=`-1` &else=`[[+parents]]`]]`
    &resources=`[[If? &subject=`[[+resources]]` &operator=`notempty` &then=`[[+resources]]` &else=`null`]]`
    &level=`1`
    &tplOuter=`stepsNavWrapper`
    &tpl=`[[+row_tpl:default=`stepsNavItem`]]`
    &sortby=`[[If? &subject=`[[+resources]]` &operator=`notempty` &then=`FIELD(modResource.id, [[+resources]])` &else=`menuindex`]]`
    &sortdir=`ASC`

    &select=`id,pagetitle,menutitle[[+show_subtitle:eq=`1`:then=`,longtitle`]]`
    &includeTVs=`[[+icon_type:inarray=`font,svg`:then=`overview_icon_[[+icon_type]]`]]`

    &setTotal=`1`
]]

[[loadAssets? &component=`steps`]]

<div class="ui [[+step_options:containsnot=`vertical`:then=`[[+total:textToNumber]]`]] [[+step_size]] [[+step_options:replace=`,== `]] [[+step_attachment]] [[+icon_type]] steps">
    [[+wrapper]]
</div>

[[+rows]]
<div class="ui reducible [[+justify_tabs:eq=`1`:then=`[[+tabs_total:textToNumber]] item`]] [[+menu_type_[[+unique_idx]]_[[+idx]]]] menu" role="tablist">
    [[+[[+pl]].tabs_menu]]
</div>

<div class="ui stackable equal width grid">
    <div class="[[+menu_cols]] wide column">
        <div class="ui vertical fluid reducible [[+menu_type_[[+unique_idx]]_[[+idx]]]] menu" role="tablist">
            [[+[[+pl]].tabs_menu]]
        </div>
    </div>
    <div class="stretched column">
        [[+rows]]
    </div>
</div>

<div class="ui stackable equal width grid">
    <div class="stretched column">
        [[+rows]]
    </div>
    <div class="[[+menu_cols]] wide column">
        <div class="ui vertical fluid reducible [[+menu_type_[[+unique_idx]]_[[+idx]]]] menu" role="tablist">
            [[+[[+pl]].tabs_menu]]
        </div>
    </div>
</div>

<div class="ui reducible [[+justify_tabs:eq=`1`:then=`[[+tabs_total:textToNumber]] item`]] [[+menu_type_[[+unique_idx]]_[[+idx]]]] menu" role="tablist">
    [[+[[+pl]].tabs_menu]]
</div>
[[+rows]]

[[+toc_type:contains=`dropdown`:then=`
<div id="dropdown-toc" class="[[+toc_type:contains=`list`:then=`mobile only`]]">
    [[$tocNavDropdown]]
</div>
`]]
[[+toc_type:contains=`list`:then=`
<div class="[[+toc_type:contains=`dropdown`:then=`mobile hidden`]]">
    [[+toc_title:lcase:isnot=`hidden`:then=`<div class="meta">[[+toc_title:empty=`[[%romanesco.toc.menu_title]]`]]</div>`]]
    <nav id="content-menu" class="ui [[+toc_size]] [[+toc_options_list:replace=`,== `]] vertical menu toc">
        [[- Menu items are generated by the TableOfContents plugin]]
    </nav>
</div>
`]]
[[!tableOfContents?
    &target=`[[+toc_type:eq=`dropdown`:then=`#dropdown-toc .menu`:else=`#content-menu`]]`
]]

<div class="ui [[+toc_size]] very long [[+toc_options_dropdown:replace=`,== `]] selection dropdown">
    <i class="dropdown icon"></i>
    [[+toc_title:lcase:isnot=`hidden`:then=`<div class="default text">[[+toc_title:empty=`[[%romanesco.toc.menu_title]]`]]</div>`]]
    <nav class="toc menu">[[- Menu items are moved here on mobile]]</nav>
</div>

<div id="dropdown-toc" class="ui vertical stripe segment mobile only tablet only">
    <div class="ui container">
        [[$tocNavDropdown?
            &toc_size=`[[++navbar_size]]`
            &toc_options_dropdown=`fluid`
        ]]
    </div>
</div>

<nav id="submenu" class="ui [[+size]] secondary vertical fluid right pointing [[+sticky:eq=`1`:then=`sticky`]] toc menu tablet or lower hidden">
    [[!tableOfContents? &target=`#submenu`]]
</nav>

[[setUserPlaceholders? &userId=`[[+author_id]]` &uid=`[[+unique_idx]]`]]

[[$headingOverviewLink? &uid=`[[+unique_idx]]`]]

<p class="meta">
    <span class="author">
        [[[[If?
            &subject=`[[+team_member_id]]`
            &operator=`notempty`
            &then=`$imgOverviewPersonAvatarLink? &id=`[[+team_member_id]]``
        ]]]]
        [[If?
            &subject=`[[+author_id]]`
            &operator=`notempty`
            &then=`[[+author_id:userinfo=`fullname`]]`
            &else=`<i class="user icon"></i> [[+createdby:userinfo=`fullname`:empty=`[[++site_name]]`]]`
        ]]
    </span>
    <span class="date">
        <i class="calendar icon"></i>
        [[+publishedon:strtotime:date=`[[++romanesco.date_format_long]]`]]
    </span>
    <span class="views">
        <i class="eye icon"></i>
        [[$getHitCount:empty=`0`? &uid=`[[+unique_idx]]`]]
    </span>
    [[-+comments_toggle:eq=`1`:then=`
    <span class="comments">
        <i class="icon comments"></i>
        <a href="[[~[[+id]]? &scheme=`full`]]#disqus_thread">[[%romanesco.article.comments:lcase]]</a>
    </span>
    `]]
</p>

<p class="ui labels">
    [[!TaggerGetTags? &resources=`[[+id]]` &rowTpl=`tagItemBasic`]]
</p>

[[[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$introtextSingleParagraph? &uid=`[[+unique_idx]]``
]]]]

[[[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`$buttonHrefOverview? &uid=`[[+unique_idx]]``
]]]]

[[setUserPlaceholders? &userId=`[[+author_id]]` &uid=`[[+unique_idx]]`]]

[[[[If?
    &subject=`[[+team_member_id]]`
    &operator=`notempty`
    &then=`$imgOverviewPersonAvatarLink? &id=`[[+team_member_id]]``
]]]]

<div class="content">
    <a href="[[~[[+id]]]]" class="header">
        [[+[[+title_field]]:empty=`[[+pagetitle]]`]]
    </a>
    <div class="description">
        <span class="meta date">
            <i class="icon calendar alternate outline"></i>
            [[+publishedon:strtotime:date=`[[++romanesco.date_format_long]]`]]
        </span>
    </div>
</div>

[[setUserPlaceholders? &userId=`[[+author_id]]` &uid=`[[+unique_idx]]`]]

<div class="sidebar column">
    <a class="ui rounded image" href="[[~[[+id]]]]">
        [[ImagePlus:empty=`[[$imgOverviewFallback? &img_type=`landscape`]]`?
            &tvname=`overview_img_landscape`
            &docid=`[[+id]]`
            &options=``
            &type=`tpl`
            &tpl=`imgOverview`
        ]]
    </a>
</div>
<div class="[[+content_width]] wide [[+title_inflate]] main column">
    [[$headingOverviewLink? &uid=`[[+unique_idx]]`]]
    <p>
        [[[[If?
            &subject=`[[+team_member_id]]`
            &operator=`notempty`
            &then=`$imgOverviewPersonAvatarLink? &id=`[[+team_member_id]]``
        ]]]]
        <span class="meta">
            <em>
                [[%romanesco.article.written_by]]
                [[If?
                    &subject=`[[+author_id]]`
                    &operator=`notempty`
                    &then=`<a href="[[~[[+team_member_id:empty=`[[++error_page]]`]]]]">[[+author_id:userinfo=`fullname`:empty=`[[++site_name]]`]]</a>`
                    &else=`[[+createdby:userinfo=`fullname`:empty=`[[++site_name]]`]]`
                ]]
                [[%romanesco.article.written_on]]
                [[+publishedon:strtotime:date=`[[++romanesco.date_format_long]]`]]
            </em>
        </span>
    </p>
    [[[[If?
        &subject=`[[+show_introtext]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$introtextDescription? &uid=`[[+unique_idx]]``
    ]]]]
    [[If?
        &subject=`[[+link_text]]`
        &operator=`isnot`
        &operand=`0`
        &then=`<p>[[$buttonHrefOverview? &uid=`[[+unique_idx]]`]]</p>`
    ]]
</div>

<figure>
    <a class="ui rounded image" href="[[~[[+id]]]]">
        [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
            &tvname=`overview_img_[[+img_type:empty=`wide`]]`
            &docid=`[[+id]]`
            &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
            &type=`tpl`
            &tpl=`imgOverview`
        ]]
    </a>
</figure>

[[$overviewRowArticleBasic? &uid=`[[+unique_idx]]`]]

<article class="item">
    <div class="content">
        <a class="header" href="[[~[[+id]]]]">[[+menutitle:empty=`[[+pagetitle]]`]]</a>
        <div class="meta">
            [[+meta_elements:contains=`date`:then=`
            <span class="date">
                [[+publishedon:strtotime:date=`[[++romanesco.date_format_long]]`]]
            </span>
            `]]
            [[+meta_elements:contains=`views`:then=`
            <span class="views">
                [[!Rowboat?
                    &table=`modx_hits`
                    &tpl=`hitCount`
                    &limit=`1`
                    &columns=`hit_count`
                    &where=`{"hit_key":"[[+id]]"}`
                    &cacheResults=`0`
                ]] views
            </span>
            `]]
        </div>
        [[If?
            &subject=`[[+show_introtext]]`
            &operator=`EQ`
            &operand=`1`
            &then=`<div class="description">[[$introtextSingleParagraph:ellipsis=`140`? &uid=`[[+unique_idx]]`]]</div>`
        ]]
    </div>
</article>

[[setUserPlaceholders? &userId=`[[+author_id]]` &uid=`[[+unique_idx]]`]]

<div class="ui padded down pointing segment secondary">
    <[[+title_hierarchy]]>
        <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
    </[[+title_hierarchy]]>
    <p class="quote">[[+introtext:stripString=`<p>`:stripString=`</p>`]]</p>
</div>

<div class="ui basic segment">
    [[[[If?
        &subject=`[[+team_member_id]]`
        &operator=`notempty`
        &then=`$imgOverviewPersonAvatarLink? &id=`[[+team_member_id]]``
    ]]]]
    <span class="meta">
        <em>
            [[%romanesco.article.written_by]]
            [[If?
                &subject=`[[+author_id]]`
                &operator=`notempty`
                &then=`<a href="[[~[[+team_member_id:empty=`[[++error_page]]`]]]]">[[+author_id:userinfo=`fullname`:empty=`[[++site_name]]`]]</a>`
                &else=`[[+createdby:userinfo=`fullname`:empty=`[[++site_name]]`]]`
            ]]
            [[%romanesco.article.written_on]]
            [[+publishedon:strtotime:date=`[[++romanesco.date_format_long]]`]]
        </em>
    </span>
    [[[[If?
        &subject=`[[+link_text]]`
        &operator=`isnot`
        &operand=`0`
        &then=`$buttonHrefOverview? &classes=`right floated` &uid=`[[+unique_idx]]``
    ]]]]
</div>

[[[[If?
    &subject=`[[+show_subtitle]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$headingOverviewSubtitleLink? &uid=`[[+unique_idx]]``
    &else=`$headingOverviewLink? &uid=`[[+unique_idx]]``
]]]]
[[[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$introtextDescription? &uid=`[[+unique_idx]]``
]]]]
[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`<p>[[$buttonHrefOverview? &uid=`[[+unique_idx]]`]]</p>`
]]

<div class="[[+alignment]] content">
    [[[[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$headingOverviewSubtitleLink? &uid=`[[+unique_idx]]``
        &else=`$headingOverviewLink? &uid=`[[+unique_idx]]``
    ]]]]

    [[[[If?
        &subject=`[[+show_introtext]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$introtextDescription? &uid=`[[+unique_idx]]``
    ]]]]
</div>

[[[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`$buttonHrefOverview? &classes=`bottom attached` &uid=`[[+unique_idx]]``
]]]]

[[[[If?
    &subject=`[[+show_subtitle]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$headingOverviewSubtitleLink? &uid=`[[+unique_idx]]``
    &else=`$headingOverviewLink? &uid=`[[+unique_idx]]``
]]]]

<div class="[[+alignment]] content">
    [[[[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$headingOverviewSubtitle? &uid=`[[+unique_idx]]``
        &else=`$headingOverview? &uid=`[[+unique_idx]]``
    ]]]]
</div>

[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`<div class="[[+alignment]] content description">[[+introtext]]</div>`
]]

<div class="ui avatar image">
    [[If?
        &subject=`[[+icon_type]]`
        &operator=`EQ`
        &operand=`svg`
        &then=`<img class="ui faded image" src="[[+overview_icon_svg:empty=`[[++overview_icon_fallback]]`]]" alt="[[+pagetitle]]">`
        &else=`<i class="circular [[+overview_icon_font:empty=`question`]]"></i>`
    ]]
</div>

<div class="content">
    <a href="[[~[[+id]]]]" class="header">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
    [[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`<div class="description">[[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]</div>`
    ]]
</div>

<[[+title_hierarchy]] class="ui [[+title_classes]] horizontal header">
    [[If?
        &subject=`[[+icon_type]]`
        &operator=`EQ`
        &operand=`svg`
        &then=`<img class="ui faded image" src="[[+overview_icon_svg:empty=`[[++overview_icon_fallback]]`]]" alt="[[+pagetitle]]">`
        &else=`<i class="circular [[+overview_icon_font:empty=`question`]]"></i>`
    ]]
    <span class="content">
        <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
        [[If?
            &subject=`[[+show_subtitle]]`
            &operator=`EQ`
            &operand=`1`
            &then=`<span class="sub header">[[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]</span>`
        ]]
    </span>
</[[+title_hierarchy]]>

[[[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$introtextSingleParagraph? &uid=`[[+unique_idx]]``
]]]]
[[[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`$buttonHrefOverview? &uid=`[[+unique_idx]]``
]]]]

<[[+title_hierarchy]] class="ui [[+title_classes]] icon header">
    [[If?
        &subject=`[[+icon_type]]`
        &operator=`EQ`
        &operand=`svg`
        &then=`<img class="ui faded image" src="[[+overview_icon_svg:empty=`[[++overview_icon_fallback]]`]]" alt="[[+pagetitle]]">`
        &else=`<i class="circular [[+overview_icon_font:empty=`question`]]"></i>`
    ]]
    <span class="content">
        <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
        [[If?
            &subject=`[[+show_subtitle]]`
            &operator=`EQ`
            &operand=`1`
            &then=`<span class="sub header">[[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]</span>`
        ]]
    </span>
</[[+title_hierarchy]]>

[[[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$introtextSingleParagraph? &uid=`[[+unique_idx]]``
]]]]
[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`<p>[[$buttonHrefOverview? &uid=`[[+unique_idx]]`]]</p>`
]]

<div class="[[+alignment]] content">
    <[[+title_hierarchy]] class="ui [[+title_classes]] centered icon header">
        [[If?
            &subject=`[[+icon_type]]`
            &operator=`EQ`
            &operand=`svg`
            &then=`<img class="ui faded image" src="[[+overview_icon_svg:empty=`[[++overview_icon_fallback]]`]]" alt="[[+pagetitle]]">`
            &else=`<i class="circular [[+overview_icon_font:empty=`question`]]"></i>`
        ]]
        <span class="content">
            <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
            [[If?
                &subject=`[[+show_subtitle]]`
                &operator=`EQ`
                &operand=`1`
                &then=`<span class="sub header">[[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]</span>`
            ]]
        </span>
    </[[+title_hierarchy]]>
</div>

[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`<div class="[[+alignment]] content">[[$introtextDescription? &uid=`[[+unique_idx]]`]]</div>`
]]
[[[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`$buttonHrefOverview? &classes=`bottom attached` &uid=`[[+unique_idx]]``
]]]]

<div class="[[+alignment]] content">
    <[[+title_hierarchy]] class="ui [[+title_classes]] centered icon header">
        [[If?
            &subject=`[[+icon_type]]`
            &operator=`EQ`
            &operand=`svg`
            &then=`<img class="ui faded image" src="[[+overview_icon_svg:empty=`[[++overview_icon_fallback]]`]]" alt="[[+pagetitle]]">`
            &else=`<i class="circular [[+overview_icon_font:empty=`question`]]"></i>`
        ]]
        <span class="content">
            [[+[[+title_field]]:empty=`[[+pagetitle]]`]]
            [[If?
                &subject=`[[+show_subtitle]]`
                &operator=`EQ`
                &operand=`1`
                &then=`<span class="sub header">[[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]</span>`
            ]]
        </span>
    </[[+title_hierarchy]]>
</div>

[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`<div class="[[+alignment]] content">[[$introtextDescription:stripTags=`<p><div>`? &uid=`[[+unique_idx]]`]]</div>`
]]

<a class="ui rounded image" href="[[~[[+id]]]]">
    [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
        &tvname=`overview_img_[[+img_type:empty=`landscape`]]`
        &docid=`[[+id]]`
        &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverview`
    ]]
</a>

<figure class="ui rounded dimmable image">
    <div class="ui dimmer">
        <div class="content">
            <div class="center">
                [[[[If?
                    &subject=`[[+show_subtitle]]`
                    &operator=`EQ`
                    &operand=`1`
                    &then=`$headingOverviewSubtitle? &classes=`inverted` &uid=`[[+unique_idx]]``
                    &else=`$headingOverview? &classes=`inverted` &uid=`[[+unique_idx]]``
                ]]]]
                [[[[If?
                    &subject=`[[+link_text]]`
                    &operator=`isnot`
                    &operand=`0`
                    &then=`$buttonHrefOverview? &uid=`[[+unique_idx]]``
                ]]]]
            </div>
        </div>
    </div>
    [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
        &tvname=`overview_img_[[+img_type:empty=`landscape`]]`
        &docid=`[[+id]]`
        &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverview`
    ]]
</figure>

[[loadAssets? &component=`dimmer`]]

<a class="ui avatar image" href="[[~[[+id]]]]">
    [[ImagePlus:empty=`[[$imgOverviewFallback? &mpy=`1`]]`?
        &tvname=`overview_img_[[+img_type:empty=`square`]]`
        &docid=`[[+id]]`
        &options=`w=150&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverview`
    ]]
</a>

<div class="content">
    <a href="[[~[[+id]]]]" class="header">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
    [[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`<div class="description">[[+overview_subtitle:empty=`[[+longtitle:empty=`[[+pagetitle]]`]]`]]</div>`
    ]]
</div>

<div class="sidebar column">
    [[$overviewRowImageBasic?
        &cols=`[[+img_snap:eq=`1`:then=`1`:else=`2`]]`
        &uid=`[[+unique_idx]]`
    ]]
</div>
<div class="[[+content_width]] wide [[+title_inflate]] main column">
    [[$overviewRowBasic? &uid=`[[+unique_idx]]`]]
</div>

<div class="ui stackable grid">
    <figure class="five wide column">
        [[$overviewRowImageBasic? &uid=`[[+unique_idx]]`]]
    </figure>

    <div class="eleven wide [[If? &subject=`[[+show_introtext]]` &operator=`EQ` &operand=`0` &then=`middle aligned`]] column">
        [[$overviewRowBasic? &uid=`[[+unique_idx]]`]]
    </div>
</div>

<div class="ui stackable content grid">
    <figure class="five wide column">
        [[$overviewRowImageBasic? &uid=`[[+unique_idx]]`]]
    </figure>

    <div class="eleven wide column">
        [[[[If?
            &subject=`[[+show_subtitle]]`
            &operator=`EQ`
            &operand=`1`
            &then=`$headingOverviewSubtitleLink? &uid=`[[+unique_idx]]``
            &else=`$headingOverviewLink? &uid=`[[+unique_idx]]``
        ]]]]
        [[[[If?
            &subject=`[[+show_introtext]]`
            &operator=`EQ`
            &operand=`1`
            &then=`$introtextDescription? &uid=`[[+unique_idx]]``
        ]]]]
    </div>
</div>

[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`<div class="extra content">[[$buttonHrefOverview? &classes=`right floated` &uid=`[[+unique_idx]]`]]</div>`
]]

[[$overviewRowImageBasic? &uid=`[[+unique_idx]]`]]

[[$overviewRowBasic? &uid=`[[+unique_idx]]`]]

[[$overviewRowImageBasic? &uid=`[[+unique_idx]]`]]

<div class="[[+alignment]] content">
    [[[[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$headingOverviewSubtitleLink? &uid=`[[+unique_idx]]``
        &else=`$headingOverviewLink? &uid=`[[+unique_idx]]``
    ]]]]
    [[[[If?
        &subject=`[[+show_introtext]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$introtextDescription? &uid=`[[+unique_idx]]``
    ]]]]
</div>

[[[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`$buttonHrefOverview? &classes=`bottom attached` &uid=`[[+unique_idx]]``
]]]]

<figure class="ui rounded image">
    [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
        &tvname=`overview_img_[[+img_type:empty=`wide`]]`
        &docid=`[[+id]]`
        &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverview`
    ]]
</figure>

<div class="[[+alignment]] content">
    [[[[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$headingOverviewSubtitle? &uid=`[[+unique_idx]]``
        &else=`$headingOverview? &uid=`[[+unique_idx]]``
    ]]]]
    [[[[If?
        &subject=`[[+show_introtext]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$introtextDescription:stripTags=`<p><div><ul><li>`? &uid=`[[+unique_idx]]``
    ]]]]
</div>

<section class="ui vertical stripe segment white ticket">
    <div class="ui container">
        <h2 class="title"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
        <div class="content lead">
            [[+introtext:ellipsis=`400`]]
        </div>

        <footer class="ui equal width meta grid ticket-meta" data-id="[[+id]]">
            <div class="compact column">
                <i class="calendar icon"></i> [[+date_ago]]
            </div>
            <div class="compact column">
                <i class="user icon"></i> [[+fullname]]
            </div>
            [[+section.id:ne=`[[*id]]`:then=`
            <div class="compact column">
                <a href="[[~[[+section.id]]]]"><i class="folder open icon"></i> [[+section.pagetitle]]</a>
            </div>
            `]]
            <div class="compact column">
                <i class="star icon"></i>
                <span class="ticket-star[[+can_star]]">[[+stared]][[+unstared]] <span class="ticket-star-count">[[+stars]]</span></span>
            </div>
            <div class="compact column">
                <i class="eye open icon"></i> [[+views]]
            </div>
            <div class="compact column">
                <i class="comment icon"></i> [[+comments]]
                [[+new_comments:ne=`0`:and:ne=``:then=`<span class="ui tiny floating blue label">1[[+new_comments]] new</span>`]]
            </div>
            <div class="right aligned column ticket-rating[[+active]][[+inactive]]">
                <span class="vote plus[[+voted_plus]]" title="[[%ticket_like]]">
                    <i class="small green circular plus icon"></i>
                </span>
                [[+can_vote]][[+cant_vote]]
                <span class="vote minus[[+voted_minus]]" title="[[%ticket_dislike]]">
                    <i class="small red circular minus icon"></i>
                </span>
            </div>
        </footer>
    </div>
</section>
<!--tickets_can_vote <span class="vote rating" title="[[%ticket_refrain]]"><i class="circular plus icon"></i></span>-->
<!--tickets_cant_vote <span class="rating[[+rating_positive]][[+rating_negative]]" title="[[%ticket_rating_total]] [[+rating_total]]: ↑[[+rating_plus]] [[%ticket_rating_and]] ↓[[+rating_minus]]">[[+rating]]</span>-->
<!--tickets_new_comments <span class="ticket-new-comments">+[[+new_comments]]</span>-->
<!--tickets_active  active-->
<!--tickets_inactive  inactive-->
<!--tickets_voted_plus  voted-->
<!--tickets_voted_minus  voted-->
<!--tickets_rating_positive  positive-->
<!--tickets_rating_negative  negative-->
<!--tickets_can_star  active-->
<!--tickets_stared <i class="blue star icon"></i>-->
<!--tickets_unstared <i class="glyphicon glyphicon-star unstared star"></i>-->

<div class="card">
    <div class="content">
        <h3 class="header"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h3>
        <div class="meta">
            <span><i class="ticket icon"></i> [[+tickets]]</span>
            <span><i class="eye icon"></i> [[+views]]</span>
            <span><i class="comments icon"></i> [[+comments]]</span>
        </div>
        [[+introtext]]
    </div>
</div>

[[$imgOverviewOrganizationLink]]

[[[[If?
    &subject=`[[+show_subtitle]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$headingOverviewSubtitleLink? &uid=`[[+unique_idx]]``
    &else=`$headingOverviewLink? &uid=`[[+unique_idx]]``
]]]]

[[[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$introtextDescription? &uid=`[[+unique_idx]]``
]]]]

<p>
    [[$socialConnectButtonsOrganization? &button_type=`basic` &uid=`[[+unique_idx]]`]]
</p>

[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`<p>[[$buttonHrefOverview? &uid=`[[+unique_idx]]`]]</p>`
]]

<figure class="ui image" title="[[%romanesco.clients.logo_title]]">
    [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
        &tvname=`organization_logo_img`
        &docid=`[[+id]]`
        &options=`w=600&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverview`
    ]]
</figure>

[[$imgOverviewPersonLink? &classes=`circular` &uid=`[[+unique_idx]]`]]

<[[+title_hierarchy]] class="ui [[+title_classes]] header">
    <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
    [[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`<span class="sub header">[[+person_jobtitle:empty=`[[+longtitle]]`]]</span>`
    ]]
</[[+title_hierarchy]]>

[[[[If?
    &subject=`[[+show_introtext]]`
    &operator=`EQ`
    &operand=`1`
    &then=`$introtextDescription? &uid=`[[+unique_idx]]``
]]]]

<p>
    [[$socialConnectButtonsPerson? &button_type=`basic` &uid=`[[+unique_idx]]`]]
</p>

[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`<p>[[$buttonHrefOverview? &uid=`[[+unique_idx]]`]]</p>`
]]

[[$imgOverviewPersonLink? &uid=`[[+unique_idx]]`]]

<div class="[[+alignment]] content">
    <a href="[[~[[+id]]]]" class="header">[[+person_firstname]]</a>
    [[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`<p class="meta">[[+person_jobtitle]]</p>`
    ]]

    [[[[If?
        &subject=`[[+show_introtext]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$introtextDescription? &uid=`[[+unique_idx]]``
    ]]]]

    [[$socialConnectButtonsPerson? &button_type=`basic` &uid=`[[+unique_idx]]`]]
</div>

[[[[If?
    &subject=`[[+link_text]]`
    &operator=`isnot`
    &operand=`0`
    &then=`$buttonHrefOverview? &classes=`bottom attached` &uid=`[[+unique_idx]]``
]]]]

[[$imgOverviewPersonAvatarLink? &uid=`[[+unique_idx]]`]]

<div class="content">
    <a href="[[~[[+id]]]]" class="header">[[+person_firstname:empty=`[[+pagetitle]]`]]</a>
    [[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`<div class="description">[[+person_jobtitle:empty=`[[+longtitle]]`]]</div>`
    ]]
</div>

<div class="sidebar column">
    [[$imgOverviewPersonLink? &classes=`circular` &uid=`[[+unique_idx]]`]]
</div>

<div class="[[+content_width]] wide [[+title_inflate]] main column">
    <[[+title_hierarchy]] class="ui [[+title_classes]] header">
        <a href="[[~[[+id]]]]">[[+person_firstname]]</a>
        <span class="sub header">[[+person_jobtitle]]</span>
    </[[+title_hierarchy]]>
    <p>
        [[$socialConnectButtonsPerson? &uid=`[[+unique_idx]]`]]
    </p>
    [[[[If?
        &subject=`[[+show_introtext]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$introtextDescription? &uid=`[[+unique_idx]]``
    ]]]]
    [[If?
        &subject=`[[+link_text]]`
        &operator=`isnot`
        &operand=`0`
        &then=`<p>[[$buttonHrefOverview? &uid=`[[+unique_idx]]`]]</p>`
    ]]
</div>

[[-$imgOverviewPersonLink? &uid=`[[+unique_idx]]`]]

<div class="ui overlay">
    <[[+title_hierarchy]] class="ui [[+title_classes]] inverted header">
        [[+[[+title_field]]:empty=`[[+pagetitle]]`]]
        [[If?
            &subject=`[[+show_subtitle]]`
            &operator=`EQ`
            &operand=`1`
            &then=`<span class="sub header">[[+person_jobtitle:empty=`[[+longtitle]]`]]</span>`
        ]]
    </[[+title_hierarchy]]>

    [[If?
        &subject=`[[+link_text]]`
        &operator=`isnot`
        &operand=`0`
        &then=`<p>[[$buttonHrefOverview? &classes=`basic` &uid=`[[+unique_idx]]`]]</p>`
    ]]
</div>

<figure>
    <a class="ui rounded image" href="[[~[[+id]]]]">
        [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
            &tvname=`overview_img_wide`
            &docid=`[[+id]]`
            &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
            &type=`tpl`
            &tpl=`imgOverview`
        ]]
    </a>
</figure>

[[$overviewRowBasic? &uid=`[[+unique_idx]]`]]

<div class="sidebar column">
    <a class="ui rounded image" href="[[~[[+id]]]]">
        [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
            &tvname=`overview_img_landscape`
            &docid=`[[+id]]`
            &options=``
            &type=`tpl`
            &tpl=`imgOverview`
        ]]
    </a>
</div>
<div class="[[+content_width]] wide [[+title_inflate]] main column">
    <[[+title_hierarchy]] class="ui [[+title_classes]] header">
        <a href="[[~[[+id]]]]">[[+[[+title_field]]:empty=`[[+pagetitle]]`]]</a>
    </[[+title_hierarchy]]>
    [[[[If?
        &subject=`[[+show_introtext]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$introtextDescription? &uid=`[[+unique_idx]]``
    ]]]]
    [[If?
        &subject=`[[+link_text]]`
        &operator=`isnot`
        &operand=`0`
        &then=`<p>[[$buttonHrefOverview? &uid=`[[+unique_idx]]`]]</p>`
    ]]
</div>

<div class="ui dimmer">
    <div class="content">
        <div class="center">
            [[If?
                &subject=`[[+show_subtitle]]`
                &operator=`EQ`
                &operand=`1`
                &then=`[[$headingOverviewSubtitle? &classes=`inverted` &uid=`[[+unique_idx]]`]]`
                &else=`[[$headingOverview? &classes=`inverted` &uid=`[[+unique_idx]]`]]`
            ]]
            [[If?
                &subject=`[[+link_text]]`
                &operator=`isnot`
                &operand=`0`
                &then=`[[$buttonHrefOverview? &classes=`basic inverted` &uid=`[[+unique_idx]]`]]`
            ]]
        </div>
    </div>
</div>

[[$infoReviewSegment? &pointer=`down` &uid=`[[+unique_idx]]`]]

<div class="ui center aligned basic segment">
    [[$imgOverviewPersonLink? &classes=`small circular` &uid=`[[+unique_idx]]`]]
</div>

<div class="ui small center aligned header">
    [[$infoNamePerson? &uid=`[[+unique_idx]]`]]
    [[[[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$infoNameOrganization? &classes=`sub header` &uid=`[[+unique_idx]]``
    ]]]]
    [[[[If?
        &subject=`[[+show_rating]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$infoRatingStars? &uid=`[[+unique_idx]]``
    ]]]]
</div>

<div class="ui padded down pointing segment secondary">
    <p class="quote" property="itemReviewed" typeof="Organization">
        <span property="review">[[+longtitle]]</span>
    </p>
    [[[[If?
        &subject=`[[+show_rating]]`
        &operator=`EQ`
        &operand=`1`
        &then=`$infoRatingStars? &uid=`[[+unique_idx]]``
    ]]]]
</div>

<div class="ui basic segment">
    [[$imgOverviewPersonAvatar]]
    [[$infoNamePerson]]
    [[[[If?
        &subject=`[[+show_subtitle]]`
        &operator=`EQ`
        &operand=`1`
        &then=`<span class="meta"><em>[[+organization_name]]</em></span>`
    ]]]]
</div>

<a class="ui faded image" href="[[~[[+id]]]]" title="[[%romanesco.clients.logo_title]]">
    [[ImagePlus:empty=`[[$imgOverviewFallback]]`?
        &tvname=`organization_logo_img`
        &docid=`[[+organization_id:empty=`[[+id]]`]]`
        &options=`w=600&q=[[++romanesco.img_quality]]&zc=1`
        &type=`tpl`
        &tpl=`imgOverview`
    ]]
</a>

<div class="ui mobile reversed stackable grid">
    <div class="four wide tablet six wide computer five wide large screen five wide widescreen center aligned column">
        [[$imgOverviewPersonLink?
            &classes=`circular`
            &img_scale=`40`
            &uid=`[[+unique_idx]]`
        ]]
        <div class="ui small header">
            [[$infoNamePerson? &uid=`[[+unique_idx]]`]]
            [[[[If?
                &subject=`[[+show_subtitle]]`
                &operator=`EQ`
                &operand=`1`
                &then=`$infoNameOrganization? &classes=`sub header` &uid=`[[+unique_idx]]``
            ]]]]
            [[[[If?
                &subject=`[[+show_rating]]`
                &operator=`EQ`
                &operand=`1`
                &then=`$infoRatingStars? &uid=`[[+unique_idx]]``
            ]]]]
        </div>
    </div>

    <div class="twelve wide tablet ten wide computer eleven wide large screen eleven wide widescreen [[+alignment]] column">
        [[$infoReviewSegment? &pointer=`left` &uid=`[[+unique_idx]]`]]
    </div>
</div>

&row_tpl=`[[modifiedIf? &subject=`[[+row_tpl]]Theme` &operator=`iselement` &operand=`chunk` &then=`[[+row_tpl]]Theme` &else=`[[+row_tpl]]`]]`
&box_type=`[[+[[+prefix]].box_type]]`
&row_type=`[[+[[+prefix]].row_type]]`
&column_type=`[[+[[+prefix]].column_type]]`
&grid_settings=`[[+[[+prefix]].grid_settings]]`
&cols=`[[+cols:textToNumber]]`
&padding=`[[+padding]]`
&alignment=`[[+alignment]]`
&responsive=`[[+responsive]]`
&prefix=`[[+prefix]]`
&unique_idx=`[[+layout_title:stripAsAlias:append=`_`]][[+layout_id]]_[[+unique_idx]]`
&title_field=`[[+title_field]]`
&title_hierarchy=`[[+title_hierarchy]]`
&title_classes=`[[+title_hierarchy:is=`span`:then=`tiny`]]`
&show_subtitle=`[[+show_subtitle]]`
&show_introtext=`[[+show_introtext]]`
&link_text=`[[If? &subject=`[[+link_text]]` &operator=`isnull` &then=`0` &else=`[[+link_text]]`]]`
&de_emphasize=`[[+de_emphasize]]`
&img_type=`[[+img_type]]`
&icon_type=`[[+icon_type]]`
&lazy_load=`[[+lazy_load]]`

&ajaxMode=`[[+pagination_type]]`
&ajaxElemWrapper=`#[[+prefix]]`
&ajaxElemRows=`#[[+prefix]] .overview`
&ajaxElemPagination=`#[[+prefix]] .pagination`
&ajaxElemLink=`#[[+prefix]] .pagination a`
&ajaxElemMore=`#[[+prefix]] .more`
&scrollTop=`[[*pagination_scroll_top]]`

&tplPageWrapper=`pageNavWrapper`
&tplPage=`pageNavItem`
&tplPageActive=`pageNavItemActive`
&tplPageFirst=`[email protected]`
&tplPageLast=`[email protected]`
&tplPagePrev=`[email protected]`
&tplPageNext=`[email protected]`
&tplPageSkip=`pageNavItemDisabled`
&tplPageFirstEmpty=`[email protected]`
&tplPageLastEmpty=`[email protected]`
&tplPagePrevEmpty=`[email protected]`
&tplPageNextEmpty=`[email protected]`
&ajaxTplMore=`pageNavItemLoadMore`

&frontend_startup_js=`paginationStartupJS`
&frontend_init_js=`paginationInitJS`
&frontend_css=``
&frontend_js=``

&pageVarKey=`[[+prefix]]-page`
&pageNavVar=`[[+prefix]].page.nav`

[[Switch:toPlaceholder=`[[+prefix]].sortdir`?
    &get=`[[+sortby]]_[[+sortdir]]`
    &c1=`menuindex_0`     &do1=`ASC`
    &c2=`publishedon_0`   &do2=`DESC`
    &c3=`createdon_0`     &do3=`DESC`
    &c4=`pagetitle_0`     &do4=`ASC`

    &c5=`menuindex_1`     &do5=`DESC`
    &c6=`publishedon_1`   &do6=`ASC`
    &c7=`createdon_1`     &do7=`ASC`
    &c8=`pagetitle_1`     &do8=`DESC`

    &default=`DESC`
]]
[[If? &subject=`[[+prefix]]` &operator=`is` &operand=`ov__` &then=`<div class="ui info message">[[%romanesco.cb_preview.overview_note? &topic=`manager` &namespace=`romanescobackyard`]]</div>`]]

[[+image:notempty=`
<a href="[[+link]]" class="image">
    [[+image]]
</a>
`]]
<div class="content">
    [[+heading:notempty=`
    <[[+level]] class="header">
        <a href="[[+link]]">[[+heading]]</a>
    </[[+level]]>
    `]]
    [[+subtitle:notempty=`
    <div class="meta">[[+subtitle]]</div>
    `]]
    [[+content:notempty=`
    <div class="description">
        [[+content]]
    </div>
    `]]
</div>
[[+button_text:notempty=`
<a href="[[+link]]" class="ui [[+emphasize:eq=`1`:then=`large primary`]] bottom attached button">[[+button_text]]</a>
`]]

[[+image:notempty=`
<figure class="image">
    [[+image]]
</figure>
`]]
<div class="content">
    [[+heading:notempty=`
    <div class="header">
        <[[+level]]>[[+heading]]</[[+level]]>
    </div>
    `]]
    [[+subtitle:notempty=`
    <div class="meta">[[+subtitle]]</div>
    `]]
    [[+content:notempty=`
    <div class="description">
        [[+content]]
    </div>
    `]]
</div>

[[If?
    &subject=`[[+box_type]][[+link:eq=``:then=`break`]]`
    &operator=`eq`
    &operand=`link`
    &then=`
    <a href="[[+link]]" class="[[+emphasize:eq=`1`:then=`ui raised`]] [[+box_type]] card">
        [[+content]]
    </a>`
    &else=`
    <div class="[[+emphasize:eq=`1`:then=`ui raised`]] card">
        [[+content]]
    </div>`
]]

[[If?
    &subject=`[[+box_type]][[+link:eq=``:then=`break`]]`
    &operator=`is`
    &operand=`link`
    &then=`
    <a href="[[+link]]" class="[[+emphasize:eq=`1`:then=`ui raised`]] link card">
        [[$cardsRowBasicLink? &uid=`[[+unique_idx]]`]]
    </a>`
    &else=`
    <div class="[[+emphasize:eq=`1`:then=`ui raised`]] card">
        [[$cardsRowBasic[[+link:eq=``:then=`Link`]]? &uid=`[[+unique_idx]]`]]
    </div>`
]]

<div class="column">
    <figure class="ui rounded [[+classes]] [[+lightbox:eq=`1`:then=`lightbox`]] image" data-idx="[[+idx]]">
        [[[[modifiedIf?
            &subject=`[[+extension:lcase]]`
            &operator=`EQ`
            &operand=`svg`
            &then=`svgSanitize? &file=`[[+url]]` &title=`[[+alt]]``
            &else=`$imgResponsiveGallery? &uid=`[[+unique_idx]]``
        ]]]]
    </figure>
</div>

<div class="column">
    <figure class="ui [[+column_type]] [[+lightbox:eq=`1`:then=`lightbox`]] image" data-idx="[[+idx]]">
        [[+image]]
        [[+column_type:isnot=`minimal`:then=`
        <figcaption class="content">
            [[+caption:nl2br:stripTags=`<br>,<strong>,<em>,<cite>,<a>`]]
        </figcaption>
        `]]
    </figure>
</div>

<figure class="[[+classes]]">
    <img class="ui lazy image"
         data-src="[[+src]]"
         src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 [[+width]] [[+height]]'%3E%3C/svg%3E"
         alt="[[+alt:htmlent]]"
    >
    [[+caption:notempty=`
    <figcaption>
        [[+caption]]
    </figcaption>
    `]]
</figure>

<div class="ui grid container">
    <div class="sixteen wide mobile twelve wide tablet ten wide computer column">
        <div class="ui large inverted header">[[+header_title]]</div>
        <p>[[+header_subtitle]]</p>
    </div>
</div>

<div id="hero" class="ui link items">
    [[[[[[If?
        &subject=`[[getRawTVValue? &tv=`header_cta`]]`
        &operator=`EQ`
        &operand=`@INHERIT`
        &then=`#[[*parent]].header_inheritance:contains=`inherit_cta`:then=`$ctaHeaderVertical`:else=```
        &else=`
            If?
                &subject=`[[getRawTVValue? &tv=`header_cta`]]`
                &operator=`isnot`
                &operand=`@INHERIT`
                &then=`$ctaHeaderVertical`
                &else=``
            `
    ]]]]]]
</div>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        var [[+var]] = new Swiper ('#[[+id]].swiper', {
            init: [[+init]],
            resizeObserver: true,
            slidesPerView: [[+cols]],
            slidesPerGroup: [[+slides_to_scroll]],
            spaceBetween: [[+spacing]],
            watchOverflow: [[+overflow]],
            loop: [[+loop]],
            freeMode: {
                enabled: [[+free]],
                minimumVelocity: 0.2,
                momentum: true,
                sticky: true
            },
            centeredSlides: [[+center]],
            autoHeight: [[+auto_height]],
            autoplay: [[+autoplay]],
            keyboard: [[+keyboard]],
            effect: '[[+transition]]',
            navigation: {
                nextEl: '.[[+id]].swiper-button-next',
                prevEl: '.[[+id]].swiper-button-prev',
            },
            pagination: {
                el: '.[[+id]].swiper-pagination',
                type: '[[+pagination]]',
                clickable: [[+clickable]],
            },
            [[+breakpoints]]
            [[+effects]]
        });
        [[+init_lightbox]]

        // Update lazy load with each new slide
        [[+var]].on('slideChange', function () {
            lazyLoadInstance.update();
        });
    });
</script>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        // Prepare container for Swiper usage
        function create[[+var]](container) {
            container.addClass('swiper');
            container
                .find('.nested.overview')
                .addClass('swiper-wrapper')
                .removeClass('stackable')
                .removeClass('doubling')
            ;
            container
                .find('.gallery')
                .addClass('swiper-wrapper')
                .removeClass('stackable')
                .removeClass('doubling')
            ;
            container
                .find('.swiper-wrapper-mobile')
                .addClass('swiper-wrapper')
            ;
            container
                .find('.swiper-wrapper > *')
                .addClass('swiper-slide')
            ;

            return new Swiper ('#[[+id]].swiper', {
                init: [[+init]],
                slidesPerView: 1,
                slidesPerGroup: [[+slides_to_scroll]],
                spaceBetween: [[+spacing]],
                loop: [[+loop]],
                freeMode: {
                    enabled: [[+free]],
                    minimumVelocity: 0.2,
                    momentum: true,
                    sticky: true
                },
                centeredSlides: [[+center]],
                autoHeight: [[+auto_height]],
                autoplay: [[+autoplay]],
                effect: '[[+transition]]',
                navigation: {
                    nextEl: '.[[+id]].swiper-button-next',
                    prevEl: '.[[+id]].swiper-button-prev',
                },
                pagination: {
                    el: '.[[+id]].swiper-pagination',
                    type: '[[+pagination]]',
                    clickable: [[+clickable]],
                },
                [[+breakpoints]]
                [[+effects]]
            });
        }

        // Clone original container
        // Life saving SO question: https://stackoverflow.com/questions/921290/
        let mobile[[+var]] = document.querySelector('#[[+id]]').cloneNode( true );
        let desktop[[+var]] = document.querySelector('#[[+id]]').cloneNode( true );
            desktop[[+var]].setAttribute('id','[[+id]]-original');

        MQ.addQuery(
            {
                context: ['mobile'],
                match: function() {

                    // Make sure the original container is in place
                    $('#[[+id]]-original').replaceWith(mobile[[+var]]);

                    // Initialize Swiper
                    let [[+var]] = create[[+var]]($('#[[+id]].swiper-mobile'));

                    // Update lazy load with each new slide
                    [[+var]].on('slideChange', function () {
                        lazyLoadInstance.update();
                    });
                },
                unmatch: function() {

                    // Revert to default layout with cloned container
                    $('#[[+id]].swiper-mobile').replaceWith(desktop[[+var]]);
                }
            }
        );
    });
</script>

[[+cell:toPlaceholder=`head_[[+colIdx]]_[[+idx]]`]]
[[+idx:eq=`1`:then=`
    [[+table_head:eq=`1`:then=`
    <th>[[+cell]]</th>
    `:else=`
    <td>[[+cell]]</td>
    `]]
`:else=`
    [[$tableColumnBasicTD? &uid=`[[+idx]]_[[+colIdx]]`]]
`]]

[[+idx:eq=`1`:then=`
    [[+table_head:eq=`1`:then=`
    <thead>
        <tr>[[+row]]</tr>
    </thead>
    <tbody>
    `:else=`
    <tbody>
        <tr>[[+row]]</tr>
    `]]
`:else=`
    <tr>[[+row]]</tr>
`]]