{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:variable name="randomId" value="{vh:generate.randomString()}"/>
<div class="tb-expandable-text">
    <div id="target-enhancement-target-{randomId}"
         class="tb-expandable-text__container">
        {content -> f:format.raw()}
    </div>
    <a 
        class="tb-expandable-text__toggle"
        href="#target-enhancement-target-{randomId}"
        data-toubiz-expandable-text
        data-toubiz-expandable-text-label-open="{f:translate(id: 'description.readMore', source: 'Views/Show', package: 'Newland.Toubiz.Poi.Neos')}"
        data-toubiz-expandable-text-label-close="{f:translate(id: 'description.readLess', source: 'Views/Show', package: 'Newland.Toubiz.Poi.Neos')}"
        data-target-enhancement
        data-target-enhancement-classes.0="expanded"
        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
        aria-expanded="false"
        aria-haspopup="true">

        <span class="tb-expandable-text__toggle-label" data-toubiz-expandable-text-label>
            <vh:translate
                id="description.readMore"
                source="Views/Show"
                package="Newland.Toubiz.Poi.Neos"/>

        </span>

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

</div>