{namespace neos=Neos\Neos\ViewHelpers}

<f:if condition="{node.parent.parent.nodetype} == 'Newland.CityTheme:Container'">
    <section class="o-container o-container--sm">
</f:if>

<div class="c-text {marginTop}">
    {neos:contentElement.editable(property: 'text', class: 'c-neos-text')}

    <f:if condition="{readMoreActive}">
        <f:then>
            <button class="c-button--collapse-toggle"
                    {f:if(condition: '{neos:rendering.inBackend()}', then: '', else: 'data-target-enhancement')}
                    data-target-enhancement-targets.0="#c-collapsible-section-{node.identifier}"
                    data-target-enhancement-classes.0="is-not-collapsed"
                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                    data-target-enhancement-plugins.1.name="smooth-scroll"
                    data-target-enhancement-plugins.1.options.duration="(int) 300"
                    data-target-enhancement-plugins.1.options.offset="(int) -150"
                    aria-expanded="{f:if(condition: '{neos:rendering.inBackend()}', then: 'true', else: 'false')}">

                <span>
                    weiterlesen
                    <svg class="c-icon c-icon--down"
                            aria-hidden="true"
                            focusable="false">

                        <use xlink:href="#icon-angle-down" />
                    </svg>
                    <svg class="c-icon c-icon--up"
                            aria-hidden="true"
                            focusable="false">

                        <use xlink:href="#icon-angle-up" />
                    </svg>
                </span>
            </button>

            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    <div id="c-collapsible-section-{node.identifier}" class="c-collapsible-section is-not-collapsed">
                        {neos:contentElement.editable(property: 'readMoreText', class: 'c-neos-text')}
                    </div>
                </f:then>
                <f:else>
                    <div id="c-collapsible-section-{node.identifier}" class="c-collapsible-section c-text">
                        {neos:contentElement.editable(property: 'readMoreText', class: 'c-neos-text')}
                    </div>
                </f:else>
            </f:if>
        </f:then>
    </f:if>
</div>

<f:if condition="{node.parent.parent.nodetype} == 'Newland.CityTheme:Container'">
    </section>
</f:if>