Molecules

[[+new_line:eq=`1`:then=`<br>`]]
[[modifiedIf?
    &subject=`[[+icon_class:empty=``]]`
    &operator=`isnot`
    &operand=``
    &then=`buttonHrefIcon`
    &else=`buttonHrefBasic`
    &outputAsTpl=`1`

    &link=`[[+link]]`
    &button_text=`[[+button_text]]`
    &classes=`[[+button_size]] [[+button_type]] [[+button_options:replace=`,== `]] [[+icon_options:replace=`,== `]] [[+icon_class:notempty=`icon`]]`
    &icon_class=`[[+icon_class]]`
    &attributes=`
        [[+button_title:notempty=`title="[[+button_title]]"`]]
        [[+new_window:eq=`1`:then=`target="_blank"`]]
        [[+link_rel:replace=`,== `:prepend=`rel="`:append=`"`]]
        [[+attributes]]
    `
]]

<pre><code class="language-[[+lang]]">[[+value]]</code>[[+label:notempty=`<span class="ui small top right attached label">[[+label]]<i class="copy link icon with tooltip" data-content="[[%romanesco.patterns.copy_tooltip]]"></i></span>`]]</pre>

<h4 class="ui [[+divider_section:is=`1`:then=`section`]] horizontal divider header">
    [[+divider_icon_class:notempty=`<i class="[[+divider_text:empty=`fitted`]] [[+divider_icon_circular:is=`1`:then=`circular`]] [[+divider_icon_class]]"></i>`]]
    [[+divider_text:notempty=`[[+divider_text]]`]]
</h4>

<[[+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]]>

<[[+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>

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

<[[+title_hierarchy]] class="ui [[+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]]" [[+link_rel:replace=`,== `:prepend=`rel="`:append=`"`]] [[+attributes]]>
    [[$imageOuter?
        &url=`[[+url]]`
        &size=`[[+size]]`
        &width=`[[+width]]`
        &height=`[[+height]]`
        &extension=`[[+extension]]`
        &alt=`[[+alt]]`
    ]]
</a>

[[modifiedIf?
    &subject=`[[+extension]]`
    &operator=`EQ`
    &operand=`svg`
    &then=`imageSVG`
    &else=`imageBasic`
    &outputAsTpl=`1`

    &url=`[[+url]]`
    &alt=`[[+alt]]`
    &classes=`rounded [[+classes:replace=`,== `]]`
]]

<div class="ui [[+size]] [[+message_type]] message">
    [[+close:is=`1`:then=`<i class="close icon"></i>`:else=``]]
    [[+heading:notempty=`<div class="header">[[+heading]]</div>`]]
    [[+content]]
</div>

<div class="[[+segment_type:notempty=`ui [[+padding]] [[+segment_type]] segment [[+background]]`]] cta" property="significantLink">
    [[#[[+cta_id:empty=`0`]].content]]
</div>

[[modifiedIf?
    &subject=`[[getRawTVValue? &tv=`footer_cta_background`]]`
    &operator=`EQ`
    &operand=`@INHERIT`
    &then=`[[[[#[[*parent]].footer_inheritance:contains=`inherit_cta_background`:then=`*footer_cta_background:empty=`[[++cta_background_default]]``:else=`++cta_background_default`]]]]`
    &else=`[[*footer_cta_background]]`
    &toPlaceholder=`footer_cta_background`
]]

<aside id="final-call" class="ui vertical stripe segment [[setBackground? &background=`[[+footer_cta_background]]`]] cta">
    <div class="ui center aligned container">
        [[#[[*footer_cta:empty=`0`]].content]]
    </div>
</aside>

<div class="ui grid container">
    <div class="center aligned bottom aligned column">
        [[#[[*header_cta:empty=`0`]].content]]
    </div>
</div>

[[#[[*header_cta:empty=`0`]].content]]

[[!Rowboat?
    &table=`modx_hits`
    &tpl=`hitCount`
    &limit=`1`
    &columns=`hit_count`
    &where=`{"hit_key":"[[+id]]"}`
    &cacheResults=`0`
]]

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '[[getContextSetting:default=`[[++google_analytics_ua]]`? &context=`[[*context_key]]` &setting=`google_analytics_ua`]]', 'auto');
    ga('send', 'pageview');
</script>

[[getContextSetting:default=`[[++google_analytics_ua]]`:toPlaceholder=`ua_code`?
    &context=`[[*context_key]]`
    &setting=`google_analytics_ua`
]]

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=[[+ua_code]]"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '[[+ua_code]]');
</script>

<meta property="og:type" content="website" />
<meta property="og:title" content="[[*longtitle:empty=`[[*pagetitle]]`]]" />
<meta property="og:description" content="[[*description]]" />
<meta property="og:url" content="[[~[[*id]]? &scheme=`full`]]" />
[[[[*overview_img_wide:notempty=`
    ImagePlus?
        &tvname=`overview_img_wide`
        &type=`tpl`
        &tpl=`imgOpenGraphRow`
        &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
    `
]]]]
[[[[*overview_img_pano:notempty=`
    ImagePlus?
        &tvname=`overview_img_pano`
        &type=`tpl`
        &tpl=`imgOpenGraphRow`
        &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
    `
]]]]
[[[[*overview_img_landscape:notempty=`
    ImagePlus?
        &tvname=`overview_img_landscape`
        &type=`tpl`
        &tpl=`imgOpenGraphRow`
        &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
    `
]]]]
[[[[*overview_img_square:notempty=`
    ImagePlus?
        &tvname=`overview_img_square`
        &type=`tpl`
        &tpl=`imgOpenGraphRow`
        &options=`w=[[++max_thumb_width]]&h=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
    `
]]]]
[[[[*overview_img_landscape:notempty=`
    ImagePlus?
        &tvname=`overview_img_landscape`
        &type=`tpl`
        &tpl=`imgOpenGraphRow`
        &options=`h=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`
    `
]]]]

[[[[modifiedIf?
    &subject=`organizationDataTheme`
    &operator=`iselement`
    &operand=`chunk`
    &then=`organizationDataTheme`
    &else=`organizationData`
    &toPlaceholder=`organization_data`
]]]]
<script type="application/ld+json">
    {
        "@context" : "https://schema.org",
        "@graph" : [
            [[[[++client_type:eq=`organization`:then=`$[[+organization_data]]`]]]]
            [[[[cbHasFields? &field=`[[++romanesco.cb_field_faq_id]]` &then=`$faqDataWrapper`]]]]
            [[pdoCrumbs?
                &tpl=`breadcrumbDataRow`
                &tplCurrent=`breadcrumbDataCurrent`
                &tplWrapper=`breadcrumbDataWrapper`
                &outputSeparator=`,`
                &where=`[{"alias_visible:!=":"0"}]`
            ]]
            {
                "@type" : "WebPage",
                "name" : "[[*longtitle:empty=`[[*pagetitle]]`]]",
                "description" : "[[*description]]",
                "url" : "[[~[[*id]]? &scheme=`full`]]"
            }
        ]
    }
</script>

<div id="comment-form-placeholder">
    <form id="comment-form" class="ui [[+form_size]] reply form" action="" method="post">
        <ol id="comment-preview-placeholder" class="ui threaded comments"></ol>
        <input type="hidden" name="thread" value="[[+thread]]"/>
        <input type="hidden" name="parent" value="0"/>
        <input type="hidden" name="id" value="0"/>

        <div class="field">
            <label for="comment-editor"></label>
            <textarea name="text" id="comment-editor" cols="30" rows="10"></textarea>
        </div>

        <div class="field">
            [[+comments_subscribe]]
        </div>

        <div class="field">
            <button type="submit" class="ui [[+form_size]] primary labeled icon submit button" title="Ctrl + Shift + Enter">
                <i class="icon edit"></i>
                [[%ticket_comment_save]]
            </button>
            <button type="button" class="ui [[+form_size]] preview button" title="Ctrl + Enter">
                [[%ticket_comment_preview]]
            </button>
            <span class="time"></span>
        </div>
    </form>
</div>

<li class="comment ticket-comment[[+comment_new]]" id="comment-[[+id]]" data-parent="[[+parent]]" data-newparent="[[+new_parent]]" data-id="[[+id]]">
    <a class="avatar">
        <img src="[[+avatar]]" alt="Avatar of [[+fullname]]">
    </a>
    <div class="content">
        <a class="author">[[+fullname]]</a>
        <div class="metadata">
            <span class="date">[[+date_ago]]</span>[[+comment_was_edited]]
        </div>
        <div class="text">
            [[+text]]
        </div>
        <div class="actions comment-reply">
            <a href="#" class="reply">[[%ticket_comment_reply]]</a>
            [[+comment_edit_link]]
        </div>
    </div>

    [[If?
        &subject=`[[+children]]`
        &operator=`notempty`
        &then=`
        <ol class="comments">
            [[+children]]
        </ol>`
    ]]
    
    [[-
    <div class="ticket-comment-body[[+guest]][[+bad]]">
        <div class="ticket-comment-header">
            <div class="ticket-comment-dot-wrapper">
                <div class="ticket-comment-dot"></div>
            </div>
            <img src="[[+avatar]]" class="ticket-avatar" alt=""/>
            <span class="ticket-comment-author">[[+fullname]]</span>
            <span class="ticket-comment-createdon">[[+date_ago]]</span>[[+comment_was_edited]]
            <span class="ticket-comment-link"><a href="[[+url]]#comment-[[+id]]">#</a></span>
            <span class="ticket-comment-star[[+can_star]]">[[+stared]][[+unstared]]</span>
            [[+has_parent]]
            <span class="ticket-comment-down"><a href="#" data-child="">↓</a></span>
            <span class="ticket-comment-rating[[+can_vote]][[+cant_vote]]">
                <span class="rating[[+rating_positive]][[+rating_negative]]"
                      title="[[%ticket_rating_total]] [[+rating_total]]: ↑[[+rating_plus]] [[%ticket_rating_and]] ↓[[+rating_minus]]">[[+rating]]</span>
                <span class="vote plus[[+voted_plus]]" title="[[%ticket_like]]"><i
                            class="glyphicon glyphicon-arrow-up"></i></span>
                <span class="vote minus[[+voted_minus]]" title="[[%ticket_dislike]]"><i
                            class="glyphicon glyphicon-arrow-down"></i></span>
            </span>
        </div>
        <div class="ticket-comment-text">
            [[+text]]
        </div>
    </div>
    <div class="comment-reply">
        <a href="#" class="reply">[[%ticket_comment_reply]]</a>
        [[+comment_edit_link]]
    </div>
    <ol class="comments comments-list">[[+children]]</ol>
    ]]
</li>
<!--tickets_comment_edit_link <a href="#" class="edit">[[%ticket_comment_edit]]</a>-->
<!--tickets_comment_was_edited <span class="ticket-comment-edited">([[%ticket_comment_was_edited]])</span>-->
<!--tickets_comment_new  ticket-comment-new-->
<!--tickets_can_vote  active-->
<!--tickets_cant_vote  inactive-->
<!--tickets_rating_positive  positive-->
<!--tickets_rating_negative  negative-->
<!--tickets_voted_plus  voted-->
<!--tickets_voted_minus  voted-->
<!--tickets_guest  ticket-comment-guest-->
<!--tickets_has_parent <span class="ticket-comment-up"><a href="[[+url]]#comment-[[+parent]]" data-id="[[+id]]" data-parent="[[+parent]]">↑</a></span>-->
<!--tickets_can_star  active-->
<!--tickets_stared <i class="glyphicon glyphicon-star stared star"></i>-->
<!--tickets_unstared <i class="glyphicon glyphicon-star unstared star"></i>-->

<li class="comment ticket-comment" id="comment-[[+id]]">
    <a class="avatar">
        <img src="[[+avatar]]" alt="Avatar of [[+fullname]]">
    </a>
    <div class="content">
        <a class="author">[[+fullname]]</a>
        <div class="metadata">
            <span class="date">[[+date_ago]]</span>[[+comment_was_edited]]
        </div>
        <div class="text">
            [[+text]]
        </div>
        <div class="actions comment-reply">
            <a href="#" class="reply">[[%ticket_comment_reply]]</a>
            [[+comment_edit_link]]
        </div>
    </div>

    [[If?
        &subject=`[[+children]]`
        &operator=`notempty`
        &then=`
        <ol class="comments">
            [[+children]]
        </ol>`
    ]]
</li>
<!--tickets_rating_positive  positive-->
<!--tickets_rating_negative  negative-->
<!--tickets_has_parent <span class="ticket-comment-up"><a href="[[+url]]#comment-[[+parent]]" data-id="[[+id]]" data-parent="[[+parent]]">↑</a></span>-->

<script defer src="[[++romanesco.commento_url]]/js/commento.js"></script>

<script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT
     *  THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR
     *  PLATFORM OR CMS.
     *
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT:
     *  https://disqus.com/admin/universalcode/#configuration-variables
     */
    var disqus_config = function () {
        this.page.url = '[[~[[*id]]? &scheme=`full`]]';
        this.page.identifier = '[[*id]]';
    };

    (function() {
        var d = document, s = d.createElement('script');

        s.src = 'https://[[++disqus_shortname]].disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

<div id="comments-wrapper">
    <h3 class="ui tiny dividing header title">
        [[%comments]] (<span id="comment-total">[[+total]]</span>)
    </h3>
    <ol id="comments" class="ui minimal threaded comments">
        [[+comments]]
    </ol>
</div>

<div id="comments-tpanel">
    <div id="tpanel-refresh"></div>
    <div id="tpanel-new"></div>
</div>

[[+modx.user.id:isloggedin:is=`1`:then=`
<span class="ui checkbox comments-subscribe">
    <input type="checkbox" name="" id="comments-subscribe" value="1" [[+subscribed]]>
    <label for="comments-subscribe">
        [[%ticket_comment_notify]]
    </label>
</span>
`:else=``:toPlaceholder=`comments_subscribe`]]

<!--tickets_subscribed checked-->

[[- Split steps into placeholders ]]
[[[[If?
    &subject=`[[+multiple_steps]]`
    &operator=`notempty`
    &then=`splitString? &input=`,[[+multiple_steps]],` &delimiter=`,[[*id]],` &prefix=`section``
]]]]
[[[[If?
    &subject=`[[+section.1]]`
    &operator=`notempty`
    &then=`splitString? &input=`[[+section.1]]` &delimiter=`,` &prefix=`prev_steps``
]]]]
[[[[If?
    &subject=`[[+section.2]]`
    &operator=`notempty`
    &then=`splitString? &input=`[[+section.2]]` &delimiter=`,` &prefix=`next_steps``
]]]]
[[[[If?
    &subject=`[[+multiple_steps]]`
    &operator=`notempty`
    &then=`splitString? &input=`[[+multiple_steps]]` &delimiter=`,` &prefix=`step``
]]]]

[[- Find out which form is used in previous / next steps ]]
[[[[If?
    &subject=`[[+section.1]]`
    &operator=`notempty`
    &then=`pdoResources?
        &parents=`-1`
        &resources=`[[+section.1]]`
        &tpl=`fbGetFormID`
        &showHidden=`1`
        &limit=`0`
        &outputSeparator=`,`
        &toPlaceholder=`prev_forms`
    `
]]]]
[[[[If?
    &subject=`[[+section.2]]`
    &operator=`notempty`
    &then=`pdoResources?
        &parents=`-1`
        &resources=`[[+section.2]]`
        &tpl=`fbGetFormID`
        &showHidden=`1`
        &limit=`0`
        &outputSeparator=`,`
        &toPlaceholder=`next_forms`
    `
]]]]

[[pdoField?
    &id=`[[+prev_step]]`
    &field=`menutitle`
    &default=`pagetitle`
    &toPlaceholder=`prev_title`
]]
[[pdoField?
    &id=`[[+next_step]]`
    &field=`menutitle`
    &default=`pagetitle`
    &toPlaceholder=`next_title`
]]

<div class="ui equal width middle aligned grid">
    [[+prev_step:isnot=``:then=`
    <div class="column">
        <a href="[[~[[+prev_step]]]]" class="ui tertiary icon button" title="Go back to [[+prev_title]]">
            <i class="chevron left icon"></i>
            [[+prev_title]]
        </a>
    </div>
    `]]
    <div class="right aligned column">
        [[+last_step:isnot=`[[+current_id]]`:then=`
        <div class="ui [[+button_size:empty=`[[+form_size]]`]] input icon submit">
            <input class="[[+button_size:empty=`[[+form_size]]`]] [[+button_type]] [[+button_alignment]] ui button"
                   type="submit"
                   name="submit-[[*alias]]"
                   value="[[+next_title]]"
                   title="Continue to [[+next_title]]">
            <i class="chevron right icon"></i>
        </div>
        `:else=`
        <input class="[[+button_size:empty=`[[+form_size]]`]] [[+button_type]] [[+button_alignment]] ui button"
               type="submit"
               name="submit-[[*alias]]"
               value="[[*fb_submit_button:default=`[[%formblocks.form.submit_button]]`]]">
        `]]
    </div>
</div>

<div class="ui container">
    <div class="ui stackable equal width middle aligned grid center when stacked">
        <div id="copyright" class="compact column">
            <p>© [[Time:date=`%Y`]]<span class="tablet or lower hidden"> - [[++site_name]]</span></p>
        </div>

        <div class="right aligned column">
            <nav id="menu-footer" class="ui horizontal list">
                [[pdoMenu?
                    &parents=`[[++common_pages_id:empty=`[[++romanesco.common_pages_id:empty=`0`]]`]]`
                    &resources=`[[+excluded_resources]]`
                    &level=`1`
                    &tplOuter=`navWrapper`
                    &tpl=`navItem`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                ]]
            </nav>
        </div>

        [[++qredits_visibility:eq=`1`:then=`
        <div id="qredits" class="compact column">
            <a class="ui mini image with tooltip onclick" data-position="top right">
                [[svgSanitize?
                    &file=`assets/semantic/dist/themes/romanesco/assets/icons/romanesco-badge.svg`
                    &title=`[[%romanesco.footer.qredits_title]]`
                ]]
            </a>
            <div class="ui popup">
                [[++qredits_text:empty=`[[%romanesco.footer.qredits_text]]`]]
                <a href="https://romanesco.info/" class="ui tiny compact fluid primary button" target="_blank">
                    [[%romanesco.footer.qredits_romanesco]]
                </a>
                <a href="https://modx.com/content-management-framework" class="ui tiny compact fluid basic icon button" target="_blank">
                    <i class="modx icon"></i>
                    [[%romanesco.footer.qredits_modx]]
                </a>
            </div>
        </div>
        `]]
    </div>
</div>

[[cbGetFieldContent:toPlaceholder=`backgroundJSON`?
    &field=`[[++romanesco.cb_field_background_id]]`
    &resource=`[[+id]]`
    &returnAsJSON=`1`
]]

.background.[[+alias]]:before {
    background:
        [[jsonGetObject?
            &json=`[[+backgroundJSON]]`
            &tpl=`[email protected]`
            &object=`rows`
            &outputSeparator=`,`
        ]]
        !important
    ;
    [[jsonGetObject?
        &json=`[[+backgroundJSON]]`
        &tpl=`globalBackgroundSettingsCSS`
        &object=`settings`
    ]]
}
.background.[[+alias]]:after {
    background: [[jsonGetObject:default=`transparent`? &json=`[[+backgroundJSON]]` &object=`background_color`]] !important;
}

@media
    (min-width: 500px) {
    .background.[[+alias]]:before {
        background:
            [[jsonGetObject?
                &json=`[[+backgroundJSON]]`
                &tpl=`[email protected]`
                &object=`rows`
                &outputSeparator=`,`
            ]]
            !important
        ;
    }
}
@media
    (min-width: 800px) {
    .background.[[+alias]]:before {
        background:
            [[jsonGetObject?
                &json=`[[+backgroundJSON]]`
                &tpl=`[email protected]`
                &object=`rows`
                &outputSeparator=`,`
            ]]
            !important
        ;
    }
}
@media
    (min-width: 1300px) {
    .background.[[+alias]]:before {
        background:
            [[jsonGetObject?
                &json=`[[+backgroundJSON]]`
                &tpl=`[email protected]`
                &object=`rows`
                &outputSeparator=`,`
            ]]
            !important
        ;
    }
}

[[++img_hidpi:eq=`1`:then=`
@media
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
    .background.[[+alias]]:before {
        background:
            [[jsonGetObject?
                &json=`[[+backgroundJSON]]`
                &tpl=`[email protected]`
                &object=`rows`
                &outputSeparator=`,`
            ]]
            !important
        ;
    }
}
@media
    (-webkit-min-device-pixel-ratio: 2) and (min-width: 500px),
    (min-resolution: 192dpi) and (min-width: 500px) {
    .background.[[+alias]]:before {
        background:
            [[jsonGetObject?
                &json=`[[+backgroundJSON]]`
                &tpl=`[email protected]`
                &object=`rows`
                &outputSeparator=`,`
            ]]
            !important
        ;
    }
}
@media
    (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
    (min-resolution: 192dpi) and (min-width: 1300px) {
    .background.[[+alias]]:before {
        background:
            [[jsonGetObject?
                &json=`[[+backgroundJSON]]`
                &tpl=`[email protected]`
                &object=`rows`
                &outputSeparator=`,`
            ]]
            !important
        ;
    }
}
`]]

/*******************************
        THEME VARIABLES
*******************************/

// DO NOT EDIT DIRECTLY!
// Generated by MODX when saving the Presentation settings under Configuration.
// If you want to tweak these variables manually, add them to site.variables instead.


// Fonts
// ---------------------------------------------------------------------

[[splitString?
    &input=`[[+theme_font_header]]`
    &delimiter=`:`
    &prefix=`font_header`
]]
[[splitString?
    &input=`[[+theme_font_page]]`
    &delimiter=`:`
    &prefix=`font_page`
]]

[[+theme_font_fallback:notempty=`@fontFallback: [[+theme_font_fallback]];`]]

[[+theme_font_header:notempty=`
@headerFont: '[[+font_header.1:replace=`+== `]]', @fontFallback;
`]]
[[+theme_font_page:notempty=`
@pageFont: '[[+font_page.1:replace=`+== `]]', @fontFallback;
`]]


// Base Sizes
// ---------------------------------------------------------------------

[[+theme_scale_ratio:notempty=`@scaleRatio: [[+theme_scale_ratio]];`]]
[[+theme_font_size:notempty=`@fontSize: [[+theme_font_size]]rem;`]]


// Brand Colors
// ---------------------------------------------------------------------

[[+theme_color_primary:notempty=`@primaryColor: #[[+theme_color_primary]];`]]
[[+theme_color_secondary:notempty=`@secondaryColor: #[[+theme_color_secondary]];`]]

[[+theme_color_primary_light:notempty=`@lightPrimaryColor: #[[+theme_color_primary_light]];`]]
[[+theme_color_secondary_light:notempty=`@lightSecondaryColor: #[[+theme_color_secondary_light]];`]]

[[+theme_page_background_color:notempty=`@pageBackground: #[[+theme_page_background_color]];`]]


// Logo
// ---------------------------------------------------------------------

@logoPath: '[[+logo_path]]';
@logoInvertedPath: '[[+logo_inverted_path]]';
@logoBadgePath: '[[+logo_badge_path]]';
@logoBadgeInvertedPath: '[[+logo_badge_inverted_path]]';

[[[[If?
    &subject=`logo_path`
    &operator=`notempty`
    &then=`
        getImageDimensions?
            &image=`[[++base_path]][[+logo_path:replace=`/assets==assets`]]`
            &phWidth=`logo_width`
            &phHeight=`logo_height`
        `
]]]]

[[+logo_width:notempty=`@logoWidth: [[+logo_width]];`]]
[[+logo_height:notempty=`@logoHeight: [[+logo_height]];`]]
[[+logo_target_width:notempty=`@logoTargetWidth: [[+logo_target_width]];`]]


// Border Radius
// ---------------------------------------------------------------------

[[+theme_border_radius:eq=`0`:then=`
@relativeBorderRadius: 0;
@absoluteBorderRadius: 0;
`]]

[[+theme_border_radius:gt=`0`:then=`
@relativeBorderRadius: @relative[[+theme_border_radius]]px;
@absoluteBorderRadius: @[[+theme_border_radius]]px;
`]]

<h3 id="[[+label]]" class="ui header">
    [[+label]]
</h3>

<table class="ui very compact celled table">
    <thead>
    <tr>
        <th class="four wide">Key</th>
        <th class="five wide">Label</th>
        <th class="seven wide">Description</th>
    </tr>
    </thead>
    <tbody>
    [[migxLoopCollection?
        &packageName=`clientconfig`
        &classname=`cgSetting`
        &where=`{"group":"[[+id]]"}`
        &tpl=`configSettingsRowTR`
    ]]
    </tbody>
</table>

<a class="item" href="[[+link]]#[[+name:stripAsAlias]]">
    <span class="ui circular [[+label_classes]] label">[[+link:setPatternType]]</span>
    [[+name]]
</a>

<a class="item" href="[[~[[+id]]]]">
    <span class="ui circular label">[[setPatternType? &input=`pages`]]</span>
    [[+pagetitle]]
</a>
[[+wrapper]]

[[includedPatternsLink:toPlaceholder=`pl_[[+id]]_[[+idx]].link`?
    &input=`[[+category]]`
    &pattern=`[[+name]]`
    &prefix=`pl_[[+id]]_[[+idx]]`
]]

[[If?
    &subject=`[[+pl_[[+id]]_[[+idx]].link]]`
    &operator=`notempty`
    &then=`
        <a class="item" href="[[+pl_[[+id]]_[[+idx]].link]]">
            <span class="ui circular [[+label_classes]] label">[[+pl_[[+id]]_[[+idx]].link:setPatternType]]</span>
            [[+name]]
            [[+assigned:eq=`1`:then=`<span class="ui right floated tiny label">[[%romanesco.patterns.assigned_chunk]]</span>`]]
        </a>
    `
    &else=`
        <div class="disabled item">
            <i class="small circular modx icon"></i>
            [[+name]]
        </div>
    `
    &uid=`[[+id]]_[[+idx]]`
]]

[[$includedPatternsRow?
    &name=`[[+templatename]]`
    &uid=`[[+id]]_[[+idx]]`
]]

<div class="ui fluid card">
    <div class="content">
        <a class="header" href="[[~[[+id]]]]" target="_blank">
            [[+menutitle:empty=`[[+pagetitle]]`]]
        </a>
        <div class="meta">
            [[+planning_date_due:notempty=`
            <span class="date">
                <i class="small calendar alternate outline icon"></i>
                [[+planning_date_due:strtotime:date=`[[++romanesco.date_format_short]]`]]
            </span>
            `]]
        </div>
        <div class="description">
            [[+longtitle]]
        </div>
    </div>
    <div class="extra content">
        [[+content_owner:notempty=`
        <span class="left floated author">
            <i class="small user icon"></i>
            [[+content_owner:userinfo=`username`]]
        </span>
        `]]
        <span class="right floated actions">
            <a class="small button" href="[[~[[+id]]]]" target="_blank">
                Visit
            </a>
            •
            <a class="small button" href="[[getContextSetting? &context=`web` &setting=`site_url`]]manager/?a=resource/update&id=[[+id]]" target="_blank">
                Edit
            </a>
        </span>
    </div>
</div>

<div class="column [[+alias]]">
    [[getResources?
        &parents=`0`
        &tvFilters=`status_progress==[[+alias]],content_priority==[[+priority]]`
        &includeTVs=`1`
        &tvPrefix=``
        &tpl=`kanbanGridCard`
    ]]
</div>

<div class="row">
    <div class="sixteen wide priority column">
        <h4 class="ui disabled header">
            [[+name]]
        </h4>
    </div>
</div>
<div class="row">
    [[migxLoopCollection?
        &packageName=`romanescobackyard`
        &classname=`rmOption`
        &where=`{"key":"status_progress"}`
        &tpl=`kanbanGridColumn`
        &addfields=`priority:[[+alias]]`
    ]]
</div>

<div class="step">
    <svg class="icon" viewBox="0 0 100 100">
        <use xlink:href="[[~[[*id]]? &scheme=`full`]]#status-[[+alias]]"></use>
    </svg>
    <div class="content mobile hidden">
        <div class="title">[[+name]]</div>
        <div class="description">[[+description]]</div>
    </div>
</div>

<div class="ui [[+total:textToNumber]] unstackable top attached kanban steps">
    [[+output]]
</div>

[[Switch:toPlaceholder=`element_class`?
    &get=`[[+type]]`
    &c1=`BosonField`       &do1=`cbField`
    &c2=`BosonLayout`      &do2=`cbLayout`
    &c3=`BosonTemplate`    &do3=`cbTemplate`
    &default=`0`
]]
[[pdoResources?
    &class=`[[+element_class]]`
    &sortby=`sortorder`
    &sortdir=`ASC`
    &limit=`0`
    &where=`{"category:=":"[[+id]]"}`
    &tpl=`patternCategoryBosonRow`
    &elementType=`[[+type]]`
    &includeContent=`1`
    &toPlaceholder=`cb_cat_[[+id]]`
]]

[[+cb_cat_[[+id]]:notempty=`
<[[+level]] [[+level:eq=`h2`:then=`id="[[+name]]"`]] class="ui primary header">
    [[+name]]
</[[+level]]>

[[+description:prepend=`<p class="lead">`:append=`</p>`]]

[[+cb_cat_[[+id]]]]
`]]

<div id="[[+name:stripAsAlias]]" class="ui pattern segment">
    <div class="ui middle aligned equal width grid">
        <div class="compact column">
            [[+icon_type:is=`custom`:then=`
            <img class="ui mini image" src="assets/components/romanescobackyard/icons/cb/[[+icon]]@2x.png" alt="Icon">
            `:else=`
            <img class="ui mini image" src="assets/components/contentblocks/img/icons/[[+icon]]@2x.png" alt="Icon">
            `]]
        </div>

        <div class="column">
            [[$headingBasic?
                &level=`h3`
                &value=`[[+name]]<span class="ui mini [[%romanesco.patterns.status_[[+pattern_status]]_color]] empty circular label" title="[[%romanesco.patterns.status_[[+pattern_status]]]]"></span>`
                &alignment=`middle aligned`
            ]]
        </div>

        <div class="compact column">
            [[+elementType:is=`BosonField`:then=`
            <i class="muted info circle link icon with visibility toggle and tooltip"
               data-target="#info-[[+name:stripAsAlias]]"
               data-targetState="hidden"
               data-content="[[%romanesco.patterns.preview_tooltip]]"
               data-position="top center"></i>
            `]]
            <i class="muted code link icon with visibility toggle and tooltip"
               data-target="#code-[[+name:stripAsAlias]]"
               data-targetState="hidden"
               data-content="[[%romanesco.patterns.code_tooltip]]"
               data-position="top center"></i>
            <i class="muted random link icon with visibility toggle and tooltip"
               data-target="#connections-[[+name:stripAsAlias]]"
               data-targetState="hidden"
               data-content="[[%romanesco.patterns.connections_tooltip]]"
               data-position="top center"></i>
        </div>
    </div>

    [[$dividerBasic]]

    <div class="meta">
        [[+properties.custom_preview:stripTags=`<p>,<ul>,<li>,<strong>`:empty=`<p><em>Description not available.</em></p>`]]
    </div>

    [[$dividerBasic? &divider_hidden=`1`]]

    [[[[+elementType:is=`BosonField`:then=`setPatternPlaceholders? &cbField=`[[+name]]` &prefix=`cf_[[+id]]`]]]]
    [[[[+elementType:is=`BosonLayout`:then=`setPatternPlaceholders? &cbLayout=`[[+name]]` &prefix=`cl_[[+id]]`]]]]

    <div class="ui stackable doubling equal width grid">

        [[+elementType:is=`BosonField`:then=`
        <div id="info-[[+name:stripAsAlias]]" class="five wide column hidden preview element">
            <table class="ui compact basic table">
                <tr>
                    <td class="six wide"><strong>Type:</strong></td>
                    <td>[[+input]]</td>
                </tr>
                [[+input:is=`chunk`:then=`
                <tr>
                    <td class="six wide"><strong>Chunk:</strong></td>
                    <td>
                        [[pdoResources?
                            &class=`modChunk`
                            &sortby=`id`
                            &limit=`1`
                            &where=`{"id:=":"[[+properties.chunk]]"}`
                            &tpl=`rawName`
                        ]]
                    </td>
                </tr>
                `]]
                [[+input:is=`repeater`:then=`
                <tr>
                    <td colspan="2">
                        <span>Repeater rows:</span>
                        [[pdoResources:prepend=``?
                            &class=`[[+element_class]]`
                            &sortby=`sortorder`
                            &sortdir=`ASC`
                            &limit=`0`
                            &where=`{"parent:=":"[[+id]]"}`
                            &tpl=`patternBosonInnerRow`
                        ]]
                    </td>
                </tr>
                `]]
            </table>
        </div>
        `]]

        <div id="code-[[+name:stripAsAlias]]" class="column hidden code element">
            <pre class="language-html"><code>[[$displayRawTemplate? &uid=`[[+name]]`]]</code></pre>
            [[+[[+cf]].wrapper_template:notempty=`<pre class="language-html"><code>[[+[[+cf]].wrapper_template]]</code></pre>`]]
            [[+elementType:is=`BosonLayout`:then=`[[jsonToHTML:nl2br? &json=`[[+[[+cl]].settings_json]]`]]`]]
            [[+elementType:is=`BosonField`:then=`[[jsonToHTML:nl2br? &json=`[[+[[+cf]].settings_json]]`]]`]]
        </div>
    </div>

    <div id="connections-[[+name:stripAsAlias]]" class="hidden connections element">
        <div class="ui divider"></div>

        <div class="ui stackable equal width divided grid">
            <div class="row">
                <div class="column">
                    <h4 class="ui disabled header">[[%romanesco.patterns.included_patterns]]</h4>
                    [[$includedPatternsOuter?
                        &pattern_template=`patternLayout[[+elementType]]`
                        &pattern_id=`[[+id]]`
                        &prefix=`pl[[+id]]`
                    ]]
                </div>
                <div class="column">
                    <h4 class="ui disabled header">[[%romanesco.patterns.referring_pages]]</h4>
                    [[$referringPatternsOuter?
                        &pattern_template=`patternLayout[[+elementType]]`
                        &pattern_id=`[[+id]]`
                        &prefix=`pl[[+id]]`
                    ]]
                </div>
            </div>
        </div>
    </div>
</div>

<[[+level]] [[+level:eq=`h2`:then=`id="[[+category]]"`]] class="ui primary header">
    [[+category]]
</[[+level]]>

[[Switch:toPlaceholder=`element_class`?
    &get=`[[+type]]`
    &c1=`ElectronTV`        &do1=`modTemplateVar`
    &c2=`ElectronSS`        &do2=`modSystemSetting`
    &c3=`ElectronCC`        &do3=`cgSetting`
    &c4=`Atom`              &do4=`modChunk`
    &c5=`Molecule`          &do5=`modChunk`
    &c6=`Organism`          &do6=`modChunk`
    &c7=`Template`          &do7=`modTemplate`
    &c8=`Formula`           &do8=`modSnippet`
    &c9=`Computation`       &do9=`modPlugin`
    &default=`0`
]]
[[pdoResources?
    &class=`[[+element_class]]`
    &sortby=`[[+type:eq=`Template`:then=`templatename`:else=`name`]]`
    &sortdir=`ASC`
    &limit=`0`
    &where=`{"category:=":"[[+id]]"}`
    &tpl=`patternCategoryRow`
    &elementType=`[[+type]]`
    &includeContent=`1`
]]
[[pdoResources:prepend=`<div class="ui segment">`:append=`</div>`?
    &class=`modCategory`
    &sortby=`category`
    &sortdir=`ASC`
    &limit=`0`
    &depth=`0`
    &where=`[{"parent:=":"[[+id]]"}]`
    &tpl=`patternCategoryParent`
    &level=`h3`
]]

[[+name:lcase:empty=`[[+templatename:stripAsAlias]]`:toPlaceholder=`pl[[+id]].pattern_name`]]

<div id="[[+pl[[+id]].pattern_name]]" class="ui pattern segment">
    [[$toolbarPattern?
        &pattern_name=`[[+name]][[+templatename]]`
        &pattern_status=`[[getElementDescription? &type=`[[+elementType]]` &name=`[[+name:empty=`[[+templatename]]`]]` &property=`elementStatus`]]`
    ]]

    [[$dividerBasic]]

    [[+description:prepend=`<p class="meta">`:append=`</p>`]]

    <div class="ui stackable equal width grid">
        [[+elementType:isnot=`ElectronTV`:and:isnot=`Computation`:then=`
        <div id="preview-[[+pl[[+id]].pattern_name]]" class="six wide column preview element">
            [[getElementDescription:empty=`<em class="meta">[[%romanesco.patterns.preview_not_available]].</em>`?
                &type=`[[+elementType:lcase]]`
                &name=`[[+name:empty=`[[+templatename]]`]]`
                &property=`elementPreview`
            ]]
        </div>
        `]]

        <div id="code-[[+pl[[+id]].pattern_name]]" class="column hidden code element">
            [[+elementType:is=`Template`:then=`
            <pre class="language-html"><code>[[$displayRawTemplate? &uid=`[[+templatename]]`]]</code></pre>
            `]]
            [[+elementType:is=`Computation`:then=`
            <pre class="language-php"><code>[[$displayRawPlugin? &uid=`[[+name]]`]]</code></pre>
            `]]
            [[+elementType:is=`Formula`:then=`
            <pre class="language-php"><code>[[$displayRawElement? &uid=`[[+name]]`]]</code></pre>
            `]]
            [[+elementType:in=`Atom,Molecule,Organism`:then=`
            <pre class="language-html"><code>[[$displayRawElement? &uid=`[[+name]]`]]</code></pre>
            `]]
            [[+elementType:is=`ElectronTV`:then=`
            [[jsonToHTML? &json=`[[tvToJSON? &tv=`[[+name]]` &showName=`1` &showSource=`0` &optionsDelimiter=`0`]]`]]
            `]]
        </div>
    </div>

    <div id="connections-[[+pl[[+id]].pattern_name]]" class="hidden connections element">
        [[$dividerBasic]]

        <div class="ui stackable equal width divided grid">
            <div class="row">
                <div class="column">
                    <h4 class="ui disabled header">
                        [[%romanesco.patterns.[[+elementType:is=`ElectronTV`:then=`assigned_templates`:else=`included_patterns`]]]]
                    </h4>
                    [[[[If?
                        &subject=`[[+elementType]]`
                        &operator=`is`
                        &operand=`ElectronTV`
                        &then=`
                            $referringPatternsOuter?
                                &pattern_list=`assignedTemplates`
                                &pattern_template=`patternLayout[[+elementType]]`
                                &pattern_name=`[[+pl[[+id]].pattern_name]]`
                                &prefix=`pl[[+id]]`
                            `
                        &else=`
                            $includedPatternsOuter?
                                &pattern_list=`includedPatterns`
                                &pattern_template=`patternLayout[[+elementType]]`
                                &pattern_name=`[[+pl[[+id]].pattern_name]]`
                                &prefix=`pl[[+id]]`
                            `
                        &uid=`[[+id]]_[[+idx]]`
                    ]]]]
                </div>
                <div class="column">
                    <h4 class="ui disabled header">
                        [[%romanesco.patterns.[[+elementType:is=`Template`:then=`assigned_tvs`:else=`referring_patterns`]]]]
                    </h4>
                    [[[[If?
                        &subject=`[[+elementType]]`
                        &operator=`is`
                        &operand=`Template`
                        &then=`
                            $includedPatternsOuter?
                                &pattern_list=`assignedTVs`
                                &pattern_template=`patternLayout[[+elementType]]`
                                &pattern_name=`[[+pl[[+id]].pattern_name]]`
                                &prefix=`pl[[+id]]`
                            `
                        &else=`
                            $referringPatternsOuter?
                                &pattern_list=`referringPatterns`
                                &pattern_template=`patternLayout[[+elementType]]`
                                &pattern_name=`[[+pl[[+id]].pattern_name]]`
                                &prefix=`pl[[+id]]`
                            `
                        &uid=`[[+id]]_[[+idx]]`
                    ]]]]
                </div>
            </div>
        </div>
    </div>
</div>

<div class="[[!If? &subject=`[[+date:strtotime]]` &operator=`GT` &operand=`[[!Time]]` &then=`future` &else=`past`]] event">
    <div class="label">
        <i class="[[+icon]] icon"></i>
    </div>
    <div class="content">
        [[+date:notempty=`
        <div class="date">
            [[+date:date=`[[++romanesco.date_format_long]]`]]
        </div>
        `]]
        [[+title:notempty=`
        <div class="summary">
            [[+title]]
        </div>
        `]]
        [[+description:notempty=`
        <div class="expandable extra text">
            [[+description]]
        </div>
        `]]
    </div>
</div>

[[Switch:toPlaceholder=`status_priority_[[+idx]]`?
    &get=`[[+status_progress:eq=`done`:then=`[[+status_health]]`:else=`[[+status_progress]]`]]`
    &c1=`to-do`         &do1=`4`
    &c2=`in-progress`   &do2=`2`
    &c3=`review`        &do3=`1`
    &c4=`stable`        &do4=`5`
    &c5=`successful`    &do5=`6`
    &c6=`problematic`   &do6=`3`
    &c7=`expired`       &do7=`7`
    &default=`0`
]]
[[Switch:toPlaceholder=`status_class_[[+idx]]`?
    &get=`[[+status_progress:eq=`done`:then=`[[+status_health]]`:else=`[[+status_progress]]`]]`
    &c1=`stable`        &do1=`positive`
    &c2=`successful`    &do2=`positive`
    &c3=`problematic`   &do3=`negative`
    &c4=`expired`       &do4=`warning`
    &default=``
]]

[[SeoTabIndexation:toPlaceholder=`status_indexation_[[+idx]]`? &resource=`[[+id]]`]]

[[migxLoopCollection?
    &packageName=`romanescobackyard`
    &classname=`rmNoteImprovement`
    &where=`{"resource_id":"[[+id]]"}`
    &tpl=`tagItemTooltip`
    &toPlaceholder=`status_improvements_[[+idx]]`
]]
[[migxLoopCollection?
    &packageName=`romanescobackyard`
    &classname=`rmNoteIssue`
    &where=`{"resource_id":"[[+id]]"}`
    &tpl=`tagItemTooltip`
    &toPlaceholder=`status_issues_[[+idx]]`
]]

<tr class="[[+status_class_[[+idx]]]][[+published:eq=`0`:then=` disabled`]]">
    <td class="indicator">
        <svg class="icon" viewBox="0 0 100 100">
            [[+status_progress:eq=`done`:then=`
            <use xlink:href="[[~[[*id]]? &scheme=`full`]]#status-[[+status_health:replace=`stable==done`]]"></use>
            `:else=`
            <use xlink:href="[[~[[*id]]? &scheme=`full`]]#status-[[+status_progress]]"></use>
            `]]
        </svg>
        <span class="hidden priority">
            [[+status_priority_[[+idx]]]]
        </span>
    </td>
    <td class="selectable">
        <a class="edit" href="[[getContextSetting? &context=`web` &setting=`site_url`]]manager/?a=resource/update&id=[[+id]]" target="_blank">[[+id]]</a>
    </td>
    <td class="selectable metadata">
        <a class="level-[[+level]]" href="[[~[[+id]]]]" target="_blank">[[+pagetitle]]</a>
        <a class="ui empty floating [[+description:eq=``:then=`red`:else=`green`]] circular label with tooltip onclick" title="Description" data-title="Description" data-content="[[+description:empty=`This field is still empty.`]]" data-variation="basic"></a>
        <a class="ui empty floating [[+longtitle:eq=``:then=`red`:else=`green`]] circular label with tooltip onclick" title="Longtitle" data-title="Longtitle" data-content="[[+longtitle:empty=`This field is still empty.`]]" data-variation="basic"></a>
    </td>
    <td class="ui blue labels">
        [[+status_improvements_[[+idx]]]]
    </td>
    <td class="ui red labels [[+status_issues_[[+idx]]:notempty=`negative`]]">
        [[+status_issues_[[+idx]]]]
    </td>
    [[+status_indexation_[[+idx]]:notempty=`
    <td class="indexation">
        [[+status_indexation_[[+idx]]:contains=`noindex`:or:contains=`nofollow`:then=`<i class="attention icon"></i>`]]
        [[+status_indexation_[[+idx]]]]
    </td>
    `]]
    <td class="owner">
        [[!+modx.user.username:eq=`[[+content_owner:userinfo=`username`]]`:then=`
        [[+content_owner:userinfo=`username`:before=`<strong>`:after=`</strong>`]]
        `:else=`
        [[+content_owner:userinfo=`username`]]
        `]]
    </td>
    <td class="due date">
        <span class="hidden sort">[[+planning_date_due]]</span>
        [[+planning_date_due:strtotime:date=`[[++romanesco.date_format_long]]`]]
    </td>
</tr>
[[+wrapper]]

<[[+level:replace=`span==div`]] class="ui [[+level:is=`span`:then=`tiny`]] [[+alignment]] header">
    [[+heading]]
</[[+level:replace=`span==div`]]>

[[+content]]

<div class="ui padded [[+pointer]] pointing segment secondary" property="itemReviewed" typeof="Organization">
    <meta property="legalName" content="[[++site_name]]">
    <p class="[[+text_size]] quote" property="review">[[+introtext:stripString=`<p>`:stripString=`</p>`]]</p>
</div>

<div class="ticket-file[[+deleted]][[+new]]" data-id="[[+id]]">
    <a href="[[+url]]" class="ticket-file-link" title="[[+file]]" target="_blank">
        <div class="ticket-file-image-wrapper">
            [[+file]]
        </div>
    </a>
    <div class="ticket-file-meta">
        <a href="#" class="ticket-file-delete">[[%ticket_file_delete]]</a>
        <a href="#" class="ticket-file-restore">[[%ticket_file_restore]]</a>
        <br/>
        <a href="#" class="ticket-file-insert">[[%ticket_file_insert]]</a>
        <br/>
        <span class="ticket-file-size">[[+size]] Kb</span>
    </div>
    <div class="ticket-file-template">
        <a href="[[+url]]">
            [[+name]]
        </a>
    </div>
</div>
<!--tickets_thumb <img src="[[+thumb]]" class="ticket-file-image" />-->
<!--tickets_deleted  deleted-->
<!--tickets_new  new-->

<div id="ticket-files-list" class="ui basic segment white">
    <div class="ui four stackable left aligned cards">
        [[+files]]
    </div>
    <div class="ui basic center aligned segment">
        <a id="ticket-files-select" class="ui tiny compact basic icon button" href="javascript:;">Select images <i class="plus icon"></i></a>
    </div>
</div>

<div id="ticket-files-container" data-action="ticket/file/upload">
    <div id="ticket-files-progress">
        <span id="ticket-files-progress-count">0/0</span>
        <span id="ticket-files-progress-percent">0%</span>
        <div id="ticket-files-progress-bar"></div>
    </div>
</div>

<div class="ui card ticket-file[[+deleted]][[+new]]" data-id="[[+id]]">
    <a href="[[+url]]" class="ticket-file-link image" title="[[+file]]" target="_blank">
        <img src="[[+thumb]]" class="ticket-file-image"/>
    </a>
    <div class="ticket-file-meta">
        <a href="#" class="ticket-file-delete">[[%ticket_file_delete]]</a>
        <a href="#" class="ticket-file-restore">[[%ticket_file_restore]]</a>
        <br/>
        <a href="#" class="ticket-file-insert">[[%ticket_file_insert]]</a>
        <br/>
        <span class="ticket-file-size">[[+size]] Kb</span>
    </div>
    <div class="ticket-file-template">
        <a href="[[+url]]" title="[[+name]]">
            <img src="[[+thumb]]"/>
        </a>
    </div>
</div>
<!--tickets_deleted  deleted-->
<!--tickets_new  new-->

<div class="ui attached segment">
    <h3 class="ui header">[[+pagetitle]]</h3>
    <div class="content">[[+content]]</div>
</div>
<h5 class="ui bottom attached secondary segment">[[+modx.user.id:userinfo=`username`]]</h5>

<div class="[[+content_type:eq=`extra`:then=`extra`]] content">
    [[If?
        &subject=`[[+right]]`
        &operator=`notempty`
        &then=`
        <div class="right floated">
            [[+right]]
        </div>`
    ]]
    [[If?
        &subject=`[[+content_type]]`
        &operator=`inarray`
        &operand=`header,meta,description`
        &then=`
        <div class="[[+content_type]]">
            [[+main]]
        </div>`
        &else=`[[+main]]`
    ]]
</div>

<div class="ui nested stackable doubling [[+padding]] [[+alignment]] [[+divider]] equal width grid">
    <div class="row">
        <div class="column">[[+main]]</div>
        <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
    </div>
</div>

<div class="ui nested four column stackable doubling [[+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 class="ui nested stackable doubling equal width grid">
    <div class="row">
        <div id="preview-[[+unique_idx]]" class="[[+preview:contains=`field`:then=`ui form`]] [[+sidebar_width]] wide preview column">
            [[+preview]]

            [[-<i class="small circular code link icon with tooltip onclick"
               data-html="[[$codeSnippet:htmlent? &value=`[[+code_field_raw]]` &lang=`html` &label=`[[%romanesco.patterns.example_label]]`]]"
               data-position="right center">
            </i>]]
        </div>

        <div id="code-[[+unique_idx]]" class="code column hidden element">
            [[+code]]
        </div>
    </div>
</div>

<div class="ui nested stackable doubling [[+padding]] [[+alignment]] [[+divider]] equal width grid">
    <div class="row">
        <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
        <div class="column">[[+main]]</div>
    </div>
</div>

<div class="ui nested one column stackable doubling [[+padding]] [[+alignment]] grid">
    <div class="column">[[+main]]</div>
</div>

<div class="ui nested three column stackable doubling [[+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 class="ui nested two column stackable doubling [[+padding]] [[+alignment]] [[+divider]] grid">
    <div class="row">
        <div class="column">[[+col_1]]</div>
        <div class="column">[[+col_2]]</div>
    </div>
</div>

<section class="[[+column_type]]">
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</section>

<article class="[[+column_type]] publication">
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</article>

[[!If:toPlaceholder=`background`?
    &subject=`[[+idx:mod]]`
    &operator=`EQ`
    &operand=`0`
    &then=`[[+background_even]]`
    &else=`[[+background_odd]]`
]]

[[!If:toPlaceholder=`interchange`?
    &subject=`[[+cols_interchange]]`
    &operator=`EQ`
    &operand=`1`
    &then=`[[+idx:mod:eq=`0`:then=`computer reversed tablet reversed`]]`
]]

<section class="ui vertical [[+background]] [[+img_snap:eq=`1`:then=`snapped`]] [[+img_inflate:eq=`1`:then=`inflated`]] stripe segment">
    <div class="ui container">
        <div class="ui stackable equal width middle aligned very relaxed [[+interchange]] grid">
            [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+unique_idx]]`]]
        </div>
    </div>
</section>

<a class="[[+column_type]]" href="[[~[[+id]]]]">
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</a>

<div class="[[+column_type]]">
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</div>

<section class="[[+column_type]] client">
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</section>

<section class="[[+column_type]] person">
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</section>

<section class="[[+column_type]] project">
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</section>

<div class="[[+column_type]] testimonial" [[+row_tpl:containsnot=`logo`:then=`vocab="https://schema.org/" typeof="Review"`]]>
    [[$[[+row_tpl]]? &unique_idx=`[[+idx]][[+page]][[+unique_idx]]`]]
</div>

<div class="ui [[+cols:textToNumber]] [[+grid_settings]] [[+responsive:replace=`,== `]] [[+alignment]] [[+padding]] nested overview [[+box_type]]">
    [[+output]]
</div>

[[- HACKERMAN ALERT
    This pagination wrapper is being added again inside the paging container by
    getPage, I guess because the same getResources call is run again.

    To prevent the extra wrapper (with empty pagination container) from being
    parsed, we set a startPage placeholder that remains the same because its
    cached and compare it to an uncached [[+page]] value. If they differ, the
    wrapper is already there and we return just the output instead.
]]
[[+page:toPlaceholder=`startPage`]]
[[+startPage:eq=`[[!+page]]`:then=`
<div id="[[If? &subject=`[[+prefix]]` &operator=`is` &operand=`ov__` &then=`ov_[[Time]]` &else=`[[+prefix]]`]]" class="pagination-wrapper">
    [[$overviewWrapper? &uid=`[[+idx]][[+page]][[+unique_idx]]`]]
    [[[[If?
        &subject=`[[$paginationFluidTheme]]`
        &operator=`isnull`
        &then=`$paginationFluid? &prefix=`[[+prefix]]``
        &else=`$paginationFluidTheme? &prefix=`[[+prefix]]``
    ]]]]
</div>
`:else=`
    [[+output]]
`]]

<[[+level:replace=`span==div`]] class="title">
    <i class="dropdown icon"></i>
    [[+heading]]
</[[+level:replace=`span==div`]]>
<div class="content">
    [[+content]]
</div>

[[+image:notempty=`
<a href="[[+link]]" class="image">
    <img src="[[pthumb? &input=`[[+image]]` &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`]]" alt="[[+heading]]">
</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=`
<div class="center aligned extra content">
    <a href="[[+link]]" class="ui primary button">[[+button_text]]</a>
</div>
`]]

[[+image:notempty=`
<div class="image">
    <img src="[[pthumb? &input=`[[+image]]` &options=`w=[[++max_thumb_width]]&q=[[++romanesco.img_quality]]&zc=1`]]" alt="[[+heading]]">
</div>
`]]
<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>`
]]

[[modifiedIf?
    &subject=`[[+box_type]][[+link:eq=``:then=`link`]]`
    &operator=`contains`
    &operand=`link`
    &then=`cardsRowBasicLink`
    &else=`cardsRowBasic`
    &outputAsTpl=`1`
    &toPlaceholder=`card_output`

    &box_type=`[[+box_type]]`
    &link=`[[+link]]`
    &image=`[[+image]]`
    &heading=`[[+heading]]`
    &level=`[[+level]]`
    &subtitle=`[[+subtitle]]`
    &content=`[[+content]]`
    &button_text=`[[+button_text]]`
    &emphasize=`[[+emphasize]]`
]]

[[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">
        [[+card_output]]
    </a>`
    &else=`
    <div class="[[+emphasize:eq=`1`:then=`ui raised`]] card">
        [[+card_output]]
    </div>`
]]

<div class="ui stackable doubling [[+alignment]] [[+divider]] equal width grid">
    [[+content]]
</div>

[[+lazy_load:eq=`1`:then=`data-`:else=``:toPlaceholder=`lazy`]]
[[$imgResponsiveScale:toPlaceholder=`scale`?
    &layout_id=`[[+layout_id]]`
    &layout_column=`[[+layout_column]]`
]]
[[responsiveImgSrcset?
    &breakpoints=`[[++romanesco.img_breakpoints]]`
    &quality=`[[++romanesco.img_quality]]`
    &src=`[[+url]]`
    &width=`[[+width]]`
    &toPlaceholder=`[[+prefix]].srcset`
]]
<div class="column">
    <figure class="ui rounded [[+classes]] [[+lightbox:eq=`1`:then=`lightbox`]] image" data-idx="[[+idx]]">
        <img [[+lazy]]srcset="[[+[[+prefix]].srcset]]"
             [[+lazy]]sizes="(min-width: 1300px) calc([[+scale]]vw / [[+cols]]),
                             (min-width: 992px) calc([[+scale]]vw / [[+cols]]),
                             (min-width: 768px) [[+cols:gt=`2`:then=`calc(([[+scale]]vw - 2em) / 2)`:else=`[[+scale]]vw`]],
                             (min-width: 360px) [[+scale]]vw,
                             [[+scale]]vw"
             [[+lazy]]src="[[+url]]"
             [[+lazy:notempty=`
             src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 [[+width]] [[+height]]'%3E%3C/svg%3E"
             class="lazy"
             `]]
             [[+lightbox:eq=`1`:then=`
             data-lightbox-img="[[pthumb? &input=`[[+url]]` &options=`w=[[++max_thumb_width:mpy=`1.5`]]&q=[[++romanesco.img_quality]]&zc=1`]]"
             data-caption="[[+title]]"
             `]]
             [[+width:notempty=`width="[[+width]]"`]]
             [[+height:notempty=`height="[[+height]]"`]]
             alt="[[+alt:empty=`[[+title]]`:htmlent]]"
        />
    </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]]" 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>

[[Switch:toPlaceholder=`menu_attachment_[[+unique_idx]]`?
    &get=`[[+menu_position]]`
    &c1=`top` &do1=`bottom attached`
    &c2=`right` &do2=``
    &c3=`bottom` &do3=`top attached`
    &c4=`left` &do4=``
    &default=`bottom attached`
]]

[[+tab_type:contains=`basic`:then=`basic vertical`:else=`[[+menu_attachment_[[+unique_idx]]]]`:toPlaceholder=`tab_segment`]]
[[+tab_type:contains=`pointing regular`:or:contains=`pointing segments`:then=``:else=`[[+tab_segment]]`:toPlaceholder=`tab_segment`]]

<div class="ui reducible [[+tab_segment]] [[+padding]] [[+idx:eq=`1`:then=`active`]] tab segment"
     data-tab="segment-[[+unique_idx]]-[[+idx]]"
     data-heading="[[+heading]]"
     data-level="[[+level:empty=`h4`]]"
     data-subtitle="[[+subtitle:empty=``]]"
     data-icon="[[+icon:empty=``]]"
     data-menu-position="[[+menu_position]]"
     role="tabpanel"
     aria-hidden="false">
    [[+content]]
</div>

<aside id="author-about" class="ui vertical stripe segment [[setBackground? &background=`[[++layout_background_default]]`]]">
    <div class="ui container">
        <div class="ui segment">
            <div class="ui two column equal width grid">
                <div class="compact column">
                    <a class="ui small image" href="[[~[[+id]]]]">
                        [[ImagePlus:empty=`[[$imgOverviewFallback? &img_type=`square`]]`?
                            &tvname=`person_image`
                            &docid=`[[+id]]`
                            &options=`w=400&h=400&q=[[++romanesco.img_quality]]&zc=1`
                            &type=`tpl`
                            &tpl=`imgOverviewFixed`
                        ]]
                    </a>
                    <p>[[$socialConnectButtonsPerson? &button_type=`basic`]]</p>
                </div>
                <div class="column">
                    <h2>[[%romanesco.article.about_author]], <a href="[[~[[+id]]]]">[[+menutitle:empty=`[[+pagetitle]]`]]</a></h2>
                    [[+introtext]]
                </div>
            </div>
        </div>
    </div>
</aside>

<form id="form-search" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]" role="search">
    <div class="ui [[+search_field_classes:default=`tiny fluid`]] icon input">
        <input type="search" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" placeholder="[[%romanesco.search.field_placeholder]]">
        <input type="hidden" name="id" value="[[+landing:default=`[[*id]]`]]">
        <i class="search icon link"></i>
    </div>
</form>

<div id="search-fullscreen">
    <button type="button" class="close">×</button>
    <form action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]" role="search">
        <input type="search" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" placeholder="[[%bootquest.form.search_field_placeholder]]" autocomplete="off">
        <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]">
        <input type="submit" name="submit-search" class="btn btn-primary btn-lg" value="[[%bootquest.form.search_button_value]]">
    </form>
</div>

<p class="lead">[[+resultInfo]]</p>

[[+results]]

<div class="ui vertical stripe segment">
    <div class="ui pagination menu">
        [[+paging]]
    </div>
</div>

<section class="ui segment">
    <h2>
        <span class="idx">[[+idx]].</span>
        <a href="[[+link]]" title="[[+longtitle]]">[[+pagetitle]]</a>
    </h2>
    <p class="meta">
        [[#[[+parent]].pagetitle:notempty=`
        <span class="ui basic label"><i class="folder open icon"></i>[[#[[+parent]].pagetitle]]</span>
        `]]
    </p>
    <p class="extract"><em>[[[[+extract:contains=`=``:then=`+introtext:stripTags=`span``:else=`+extract`]]]]</em></p>
    <a class="primary ui button" href="[[+link]]" title="[[+longtitle]]">
        [[%romanesco.search.result_button_text]]
    </a>
</section>

<span class="social connect buttons" vocab="https://schema.org/" typeof="[[++client_type:ucfirst:empty=`Organization`]]">
    <meta property="name" content="[[++site_name]]">
    [[[[If?
        &subject=`[[++social_twitter]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectTwitter? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
    [[[[If?
        &subject=`[[++social_linkedin]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectLinkedin? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
    [[[[If?
        &subject=`[[++social_facebook]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectFacebook? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
    [[[[If?
        &subject=`[[++social_instagram]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectInstagram? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
    [[[[If?
        &subject=`[[++social_pinterest]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectPinterest? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
    [[[[If?
        &subject=`[[++social_youtube]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectYoutube? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
    [[[[If?
        &subject=`[[++social_whatsapp]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectWhatsapp? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
    [[[[If?
        &subject=`[[++social_github]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectGithub? &classes=`[[+button_size]] [[+button_type]]``
    ]]]]
</span>

<span class="social connect buttons" vocab="https://schema.org/" typeof="Person">
    <meta property="name" content="[[+person_firstname]] [[+person_lastname]]">
    <meta property="jobTitle" content="[[+person_jobtitle]]">
    [[[[If?
        &subject=`[[+social_twitter]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectTwitter? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_twitter_person]]` &account=`[[+social_twitter]]``
    ]]]]
    [[[[If?
        &subject=`[[+social_linkedin]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectLinkedin? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_linkedin_person]]` &account=`[[+social_linkedin]]``
    ]]]]
    [[[[If?
        &subject=`[[+social_facebook]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectFacebook? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_facebook_person]]` &account=`[[+social_facebook]]``
    ]]]]
    [[[[If?
        &subject=`[[+social_instagram]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectInstagram? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_instagram_person]]` &account=`[[+social_instagram]]``
    ]]]]
    [[[[If?
        &subject=`[[+social_pinterest]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectPinterest? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_pinterest_person]]` &account=`[[+social_pinterest]]``
    ]]]]
    [[[[If?
        &subject=`[[+social_youtube]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectYoutube? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_youtube_person]]` &account=`[[+social_youtube]]``
    ]]]]
    [[[[If?
        &subject=`[[+social_whatsapp]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectWhatsapp? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_whatsapp_person]]` &account=`[[+social_whatsapp]]` &text=`[[+social_whatsapp_text]]``
    ]]]]
    [[[[If?
        &subject=`[[+social_github]]`
        &operator=`notempty`
        &then=`$buttonSocialConnectGithub? &classes=`[[+button_size]] [[+button_type]]` &title=`[[%romanesco.social.connect_github_person]]` &account=`[[+social_github]]``
    ]]]]
</span>

<span class="social share buttons">
    [[[[++social_sharing_channels:contains=`facebook`:then=`$buttonSocialShareFacebook? &classes=`[[+button_size]] [[+button_type]]` &uid=`[[+unique_idx]]``]]]]
    [[[[++social_sharing_channels:contains=`twitter`:then=`$buttonSocialShareTwitter? &classes=`[[+button_size]] [[+button_type]]` &uid=`[[+unique_idx]]``]]]]
    [[[[++social_sharing_channels:contains=`linkedin`:then=`$buttonSocialShareLinkedin? &classes=`[[+button_size]] [[+button_type]]` &uid=`[[+unique_idx]]``]]]]
    [[[[++social_sharing_channels:contains=`pinterest`:then=`$buttonSocialSharePinterest? &classes=`[[+button_size]] [[+button_type]]` &uid=`[[+unique_idx]]``]]]]
    [[[[++social_sharing_channels:contains=`email`:then=`$buttonSocialShareEmail? &classes=`[[+button_size]] [[+button_type]]` &uid=`[[+unique_idx]]``]]]]
    [[$socialShareButtonsTheme? &classes=`[[+button_size]] [[+button_type]]` &uid=`[[+unique_idx]]`]]
</span>

<div class="ui card">
    <div class="content">
        <img class="right floated ui mini image" src="[[+profile_image_url]]" alt="[[+name]] on Twitter">
        <div class="header">
            [[+name]]
        </div>
        <div class="meta">
            <a href="https://twitter.com/[[+screen_name]]" target="_blank">@[[+screen_name]]</a>
        </div>
        <div class="description">
            [[+text:TwitterXFormat]]
        </div>
    </div>
    <div class="extra content">
        [[+created_at:ago]]
        <span class="right floated">
            <a href="https://twitter.com/[[+screen_name]]" title="View on Twitter" target="_blank">
                <i class="twitter outline icon"></i>
            </a>
        </span>
    </div>
</div>

<div class="ui card">
    <div class="content">
        <div class="description">
            <a class="meta" href="https://twitter.com/[[+screen_name]]" target="_blank">@[[+screen_name]]:</a>
            [[+text:TwitterXFormat]]
        </div>
    </div>
</div>

[[+errors:notempty=`<div class="ui error message">[[+errors]]</div>`]]

<form class="ui [[+form_size]] form" action="[[~[[*id]]]]" method="post">
    <div class="field">
        <label for="login-name">[[%login.username]]</label>
        <input id="login-name" name="username" type="text">
    </div>
    <div class="field">
        <label for="login-password">[[%login.password]]</label>
        <input id="login-password" type="password" name="password">
    </div>
    [[+login.recaptcha_html]]
    <input type="hidden" name="returnUrl" value="[[+request_uri]]">
    <input type="hidden" name="service" value="login">
    <button name="login" class="ui [[+form_size]] button" type="submit">[[+actionMsg]]</button>
</form>

[[+errors:notempty=`<div class="ui tiny error message">[[+errors]]</div>`]]

<form id="form-login" class="ui right dropdown item" action="[[~[[*id]]]]" method="post">
    [[+actionMsg]]
    <i class="dropdown icon"></i>

    <div class="menu">
        <div class="ui left icon input">
            <i class="user icon"></i>
            <input id="login-name" name="username" type="text" placeholder="[[%login.username]]">
        </div>
        <div class="ui left icon input">
            <i class="user secret icon"></i>
            <input id="login-password" name="password" type="password" placeholder="[[%login.password]]">
        </div>
        <input type="hidden" name="returnUrl" value="[[+request_uri]]">
        <input type="hidden" name="service" value="login">

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

        <div class="submit item">
            <i class="sign in icon"></i>
            [[+actionMsg]]
        </div>
    </div>
</form>

[[+errors:notempty=`<div class="ui error message">[[+errors]]</div>`]]

<div class="ui equal width middle aligned grid">
    <div class="ui column">
        You are logged in as <strong>[[!+modx.user.id:userinfo=`username`]]</strong>
    </div>
    <div class="ui compact column">
        <a href="[[+logoutUrl]]" title="[[+actionMsg]]" class="ui button">[[+actionMsg]]</a>
    </div>
</div>

[[+errors:notempty=`<div class="ui error message">[[+errors]]</div>`]]

<div class="ui right dropdown item">
    [[!+modx.user.id:userinfo=`username`]]
    <i class="dropdown icon"></i>

    <div class="menu">
        <div class="header">User settings</div>

        <div class="item">My tickets</div>
        <div class="item">My comments</div>

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

        <a href="[[+logoutUrl]]" title="[[+actionMsg]]" class="item">
            <i class="sign out icon"></i>
            [[+actionMsg]]
        </a>
    </div>
</div>