{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>
