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

<li class="c-toggle" {f:if(condition: '{renderFAQInItems}', then: 'itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"', else: '')}>
    <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">

        <f:if condition="{renderFAQInItems}">
            <span itemprop="name">
        </f:if>
            {neos:contentElement.editable(property: 'title', tag: 'span', class: 'c-toggle__title')}
        <f:if condition="{renderFAQInItems}">
            </span>
        </f:if>

        <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: '{renderFAQInItems}', then: 'itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"', else: '')}>

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