{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}

<li class="c-toggle">
    <button aria-haspopup="true"
            data-target-enhancement
            aria-expanded="{f:if(condition: '{initiallyOpen} || {neos:rendering.inBackend()}', then: 'true', else: 'false')}"
            data-target-enhancement-targets.0="#toggle__body--{node.identifier}"
            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) -250"
            data-target-enhancement-exclusive-group="toggles-{node.parent.parent.identifier}"
            class="c-toggle__title">

        {neos:contentElement.editable(property: 'title', tag: 'span', class: 'c-toggle__title')}
        <svg class="c-icon">
            <use xlink:href="#icon-angle-down"></use>
        </svg>
    </button>
    <div id="toggle__body--{node.identifier}"
            class="{f:if(condition: initiallyOpen, then: 'c-toggle__body is-target', else: 'c-toggle__body')}">

        <f:if condition="{items}">
            {items -> f:format.raw()}
        </f:if>
    </div>
</li>