{namespace neos=Neos\Neos\ViewHelpers}

<f:layout name="Default" />

<f:section name="Content">
    <article class="tb-event-detail"
             aria-labelledby="{node.identifier}">

        <div class="tb-header">
            <div class="tb-header__topline">
                <f:if condition="{event.isTipp}">
                    <span class="tb-badge">
                        {f:translate(id: 'views._shared.word.tip', package: 'Newland.Toubiz.Events.Neos')}
                    </span>
                </f:if>

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

        <div class="tb-layout-detail mt-4">
            <section class="tb-layout-detail__main">
                <div class="tb-event-detail__date">
                    <p>
                        {event.beginsAt -> f:format.date(cldrFormat: 'E, dd.MM', forceLocale: node.context.dimensions.language.0)}

                        <f:if condition="{event.endsOnSameDay}">
                            <f:else>
                                -
                                {event.endsAt -> f:format.date(cldrFormat: 'E, dd.MM', forceLocale: node.context.dimensions.language.0)}
                            </f:else>
                        </f:if>

                        <f:if condition="{event.beginsAtSpecificTime}">
                            <span class="tb-event-detail__time">
                                {event.beginsAt -> f:format.date(format: 'H:i')}
                                {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}
                                -
                                {event.endsAt -> f:format.date(format: 'H:i')}
                                {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}
                            </span>
                        </f:if>
                    </p>
                </div>

                <div class="tb-event-detail__text">
                    {event.description -> f:format.raw()}
                </div>

                <footer class="tb-event-detail__footer">
                    <div class="tb-event-detail__footer-item tb-event-detail__address">
                        <p>
                            <f:render partial="Events/Address" arguments="{address: event.location}" />
                        </p>
                    </div>
                    <div class="tb-event-detail__footer-item tb-event-detail__additional-dates">
                        <p>
                            <f:render partial="Events/UpcomingEventDates" arguments="{event: event, node: node}" />
                        </p>
                    </div>
                    <f:if condition="{event.features -> f:count()}">
                        <div class="tb-event-detail__footer-item tb-event-detail__features">
                            <ul>
                                <f:for each="{event.features}" as="feature">
                                    <li>{feature.title}</li>
                                </f:for>
                            </ul>
                        </div>
                    </f:if>
                    <f:if condition="{event.admission} || {event.ticketUri}">
                        <div class="tb-event-detail__footer-item tb-event-detail__admission">
                            <f:if condition="{event.admission}">
                                <p>
                                    <strong>{f:translate(id: 'views.events.show.admission', package: 'Newland.Toubiz.Events.Neos')}</strong>
                                    {event.admission -> f:format.raw()}
                                </p>
                            </f:if>
                            <f:if condition="{event.ticketUri}">
                                <p>
                                    <a href="{event.ticketUri}" target="_blank" class="c-button">
                                        <f:translate id="ticketUri.label"
                                                    package="Newland.Toubiz.Events.Neos"
                                                    source="Views/Events/Show" />

                                    </a>
                                </p>
                            </f:if>
                        </div>
                    </f:if>
                    <f:if condition="{event.organizer.name}">
                        <div class="tb-event-detail__footer-item tb-event-detail__organizer">
                            <p>
                                <strong>{f:translate(id: 'views.events.show.organizer', package: 'Newland.Toubiz.Events.Neos')}</strong><br />
                                {event.organizer.name}
                            </p>
                        </div>
                    </f:if>
                </footer>

            </section>

            <section class="tb-layout-detail__sidebar-first">
                <figure class="tb-event-detail__figure">
                    <img src="{event.media.0.sourceUri}" class="tb-event-detail__image" title="{event.media.0.title}" alt="{event.media.0.title}" />

                    <f:if condition="{event.media.0.copyright}">
                        <figcaption class="tb-event-detail__caption">{event.media.0.copyright}</figcaption>
                    </f:if>
                </figure>
            </section>

            <f:comment>
            <section class="tb-layout-detail__sidebar-last">
                <div class="tb-article__content-block">
                    <!--
                    Sidebar components such as source, social media and downloads should
                    each be placed inside their own respective `.tb-article__content-block`
                    wrapper inside `.tb-layout-detail__sidebar-last`
                    -->
                </div>
            </section>
            </f:comment>
        </div>
    </article>
</f:section>