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


<div class="c-toggle">
    <svg style="display: none;">
        <symbol id="icon-arrow-down" viewBox="0 0 256 512">
            <path d="M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z"/>
        </symbol>
    </svg>
    <button aria-haspopup="true"
            data-target-enhancement
            aria-expanded="{f:if(condition: initiallyOpen, then: 'true', else: 'false')}"
            data-target-enhancement-targets.0="#toggle__body--{node.identifier}"
            data-target-enhancement-exclusive-group="toggle-group"
            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
            class="c-toggle__title">

        {neos:contentElement.editable(property: 'title', tag: 'span')}
        <svg class="c-icon">
            <use xlink:href="#icon-arrow-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>
</div>