{namespace neos=Neos\Neos\ViewHelpers}
{namespace nvh=Newland\NeosViewHelpers\ViewHelpers}

<f:layout name="Default"/>

<f:section name="Content">
    <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">
                <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>
            </div>
        </header>

        <div class="mb-10">
            <div class="tb-layout-detail">
                <section class="tb-layout-detail__main">
                    <div class="mb-8">
                        <f: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>
                </section>

                <f:if condition="{event.media.0}">
                    <section class="tb-layout-detail__sidebar-first">
                        <div class="mb-8">
                            <figure
                                role="group"
                                class="tb-gallery-preview tb-gallery-preview--single-image"
                                data-toubiz-gallery>

                                <div class="tb-gallery-preview__main">
                                    <a
                                        data-toubiz-gallery-item
                                        href="{event.media.0.sourceUri}"
                                        data-sub-html="{event.media.0.copyright}"
                                        class="tb-gallery-preview__link">

                                        <img
                                            src="{event.media.0.sourceUri}"
                                            class="tb-event-detail__image"
                                            title="{event.media.0.title}"
                                            alt="{event.media.0.title}"
                                            itemprop="image" />

                                        <div class="tb-gallery-preview__caption">
                                            <p class="text-sm">
                                                <span class="text-xs">{event.media.0.copyright}</span>
                                            </p>
                                        </div>
                                    </a>
                                </div>
                            </figure>
                        </div>
                    </section>
                </f:if>

                <section class="tb-layout-detail__sidebar-last">
                    <f:if condition="{nvh:collection.includesValue(collection: configuration.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>
                </section>
            </div>
        </div>
    </article>
</f:section>