{namespace neos=Neos\Neos\ViewHelpers}
{namespace nvh=Newland\NeosViewHelpers\ViewHelpers}
{namespace components=Newland\NeosCommon\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}


<f:layout name="Default"/>

<f:section name="Content">
    <div class="o-container">
        <common:slot.render slot="aboveDetail" context="{ event: event }" />
        <article
            aria-labelledby="title-{node.identifier}"
            itemscope
            itemtype="http://schema.org/Event"
            itemid="{event.persistenceObjectIdentifier}">

            <meta itemprop="mainEntityOfPage" content="{url}" />

            <header class="mb-8">
                <div class="tb-header">

                    <common:slot.render slot="aboveTitle" context="{ event: event }" />
                    <common:slot.render slot="aboveDetailTitle" context="{ event: event }" />
                    <div class="tb-header__topline">
                        <f:if condition="{event.isTipp}">
                            <span class="tb-badge">
                                <f:translate
                                    id="property.isTipp"
                                    package="Newland.Toubiz.Events.Neos"
                                    source="Models/Event" />

                            </span>
                        </f:if>

                        <ul class="tb-horizontal-list">
                            <f:for each="{event.categories}" as="category">
                                <li class="tb-horizontal-list__item font-bold uppercase">{category.title}</li>
                            </f:for>
                        </ul>
                    </div>
                    <h1
                        id="title-{node.identifier}"
                        itemprop="name">

                        {event.title}
                    </h1>
                    <common:slot.render slot="belowDetailTitle" context="{ event: event }" />
                    <common:slot.render slot="belowTitle" context="{ event: event }" />
                </div>
            </header>

            <div class="mb-10">
                <div class="tb-layout-detail">
                    <section class="tb-layout-detail__main">
                        <common:slot.render slot="aboveDetailMainContent" context="{ event: event }" />
                        <div class="mb-8">
                            <nvh:render partial="Events/Attributes" arguments="{_all}" />
                        </div>

                        <div class="mb-8">
                            <div class="tb-expandable-text">
                                <div id="description-{node.identifier}"
                                     class="tb-expandable-text__container"
                                     itemprop="description">

                                    {event.description -> f:format.raw()}
                                </div>

                                <a class="tb-expandable-text__toggle"
                                   href="#description-{node.identifier}"
                                   data-toubiz-expandable-text
                                   data-toubiz-expandable-text-label-open="{f:translate(id: 'expandableText.showMore', package: 'Newland.Toubiz.Events.Neos', source: 'Views/Events/Show')}"
                                   data-toubiz-expandable-text-label-close="{f:translate(id: 'expandableText.showLess', package: 'Newland.Toubiz.Events.Neos', source: 'Views/Events/Show')}"
                                   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>

                                        <f:translate id="expandableText.showMore"
                                                     package="Newland.Toubiz.Events.Neos"
                                                     source="Views/Events/Show" />

                                    </span>

                                    <svg class="c-icon c-icon--toggle-down" aria-hidden="true">
                                        <use xlink:href="#icon-toggle-down"></use>
                                    </svg>
                                    <svg class="c-icon c-icon--toggle-up" aria-hidden="true">
                                        <use xlink:href="#icon-toggle-up"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <common:slot.render slot="belowDetailMainContent" context="{ event: event }" />
                    </section>

                    <f:if condition="{event.media.0}">
                        <section class="tb-layout-detail__sidebar-first">
                            <common:slot.render slot="aboveDetailGallery" context="{ event: event }" />
                            <components:gallery
                                image="{event.media.0}"
                                wrapperClass="mb-8"
                            />
                            <common:slot.render slot="belowDetailGallery" context="{ event: event }" />
                        </section>
                    </f:if>

                    <section class="tb-layout-detail__sidebar-last">
                        <common:slot.render slot="aboveDetailAside" context="{ event: event }" />
                        <f:if condition="{nvh:collection.includesValue(collection: settings.displayOptions.show.hide, value: 'source')} == false">
                            <f:if condition="{event.sourceName}">
                                <div class="mb-8">
                                    <h2 class="mt-0 mb-2 text-xl">
                                        <f:translate
                                            id="source.header"
                                            package="Newland.Toubiz.Events.Neos"
                                            source="Views/Events/Show"/>

                                    </h2>
                                    <div class="tb-source">
                                        <p class="tb-source__text">
                                            <strong>{event.sourceName}</strong>
                                        </p>
                                    </div>
                                </div>
                            </f:if>
                        </f:if>
                        <common:slot.render slot="belowDetailAside" context="{ event: event }" />
                    </section>
                </div>
            </div>
        </article>
        <common:slot.render slot="belowDetail" context="{ event: event }" />
    </div>
</f:section>