{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<nav class="tb-tab-navigation">
    <ul class="list-reset p-0">
        <li
            class="tb-tab-navigation__item"
            data-target-enhancement
            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
            data-target-enhancement-exclusive-group="tb-tab-navigation-target-group"
            data-target-enhancement-targets.0="#target-enhancement-target-dates"
            aria-expanded="true"
            aria-haspopup="true">

            <f:translate
                id="tabs.dates.title"
                package="Newland.Toubiz.Events.Neos"
                source="Views/Events/Show" />

        </li>

        <f:if condition="{event.attributes.features} || {event.organizer} || {event.link} || {event.additionalInformation}">
            <li
                class="tb-tab-navigation__item"
                data-target-enhancement
                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                data-target-enhancement-exclusive-group="tb-tab-navigation-target-group"
                data-target-enhancement-targets.0="#target-enhancement-target-details"
                aria-expanded="false"
                aria-haspopup="true">

                <f:translate
                    id="tabs.details.title"
                    package="Newland.Toubiz.Events.Neos"
                    source="Views/Events/Show" />

            </li>
        </f:if>
    </ul>
</nav>

<div
    id="target-enhancement-target-dates"
    class="is-target"
    data-target-enhancement-subject>

    <table class="tb-table tb-table--with-dividers">
        <caption class="sr-only">
            Event Infos
        </caption>
        <tbody>
        <tr>
            <th>
                <f:translate
                    id="property.dates.title"
                    package="Newland.Toubiz.Events.Neos"
                    source="Views/Events/Show" />

            </th>
            <td>
                <f:comment>
                    <!--
                        An event can have multiple dates but generally has one start and one
                        end date which define the first and last event date. These are used
                        as provided microdata.
                    -->
                </f:comment>
                <span itemprop="startDate" content="{f:format.date(date: event.beginsAt, format: 'Y-m-d')}"></span>
                <span itemprop="endDate" content="{f:format.date(date: event.endsAt, format: 'Y-m-d')}"></span>

                <f:if condition="{event.upcomingEventDates -> f:count()} < 3">
                    <f:then>
                        <vh:render section="EventDates" arguments="{_all}"/>
                    </f:then>
                    <f:else>
                        <div id="target-enhancement-upcoming-dates" class="tb-expandable-text__container">
                            <vh:render section="EventDates" arguments="{_all}"/>
                        </div>

                        <a
                            class="tb-expandable-text__toggle"
                            href="#target-enhancement-upcoming-dates"
                            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-class="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>
                    </f:else>
                </f:if>
            </td>
        </tr>
        <f:if condition="{event.location}">
            <tr>
                <th>
                    <f:translate
                        id="property.location.title"
                        package="Newland.Toubiz.Events.Neos"
                        source="Views/Events/Show" />
                </th>
                <td>
                        <span
                            itemscope
                            itemprop="location"
                            itemtype="http://schema.org/Place">

                            <vh:render partial="Events/Address" arguments="{address: event.location}" />
                        </span>
                </td>
            </tr>
        </f:if>
        <f:if condition="{event.admission} || {event.ticketUri} || {event.ticketContact}">
            <tr>
                <th>
                    <f:translate
                        id="property.price.title"
                        package="Newland.Toubiz.Events.Neos"
                        source="Views/Events/Show" />

                </th>
                <td>
                    <f:if condition="{event.admission}">
                        {event.admission -> f:format.raw()}
                    </f:if>
                    <f:if condition="{event.guestCardAccepted}">
                        <p class="mt-4">
                            <f:translate
                                id="guestCardAccepted"
                                package="Newland.Toubiz.Events.Neos"
                                source="Views/Events/Show" />

                        </p>
                    </f:if>
                    <f:if condition="{event.ticketContact}">
                        <div class="mt-4">
                            {event.ticketContact -> f:format.raw() -> f:format.nl2br()}
                        </div>
                    </f:if>
                    <f:if condition="{event.ticketUri}">
                        <p class="mt-4">
                            <a href="{event.ticketUri -> vh:format.prefix(query: 'http', prefix: 'http://')}" target="_blank" class="c-button">
                                <f:translate
                                    id="ticketUri.label"
                                    package="Newland.Toubiz.Events.Neos"
                                    source="Views/Events/Show" />

                            </a>
                        </p>
                    </f:if>
                </td>
            </tr>
        </f:if>
        </tbody>
    </table>
</div>

<div
    id="target-enhancement-target-details"
    class="tb-tab-navigation__target"
    data-target-enhancement-subject>

    <table class="tb-table tb-table--with-dividers">
        <caption class="sr-only">
            Event Details
        </caption>
        <tbody>
        <f:if condition="{event.attributes.features}">
            <tr>
                <th>
                    <f:translate
                        id="property.attributes.title"
                        package="Newland.Toubiz.Events.Neos"
                        source="Views/Events/Show" />

                </th>
                <td>
                    <f:for each="{event.attributes.features}" as="feature" iteration="iterator">
                        <div class="{f:if(condition: iterator.isFirst, else: 'mt-1')}">
                            {feature}
                        </div>
                    </f:for>
                </td>
            </tr>
        </f:if>

        <f:if condition="{event.organizer}">
            <tr>
                <th>
                    <f:translate
                        id="property.organizer.title"
                        package="Newland.Toubiz.Events.Neos"
                        source="Views/Events/Show" />

                </th>
                <td>
                    <f:if condition="{event.organizer.name}">
                        <strong>{event.organizer.name}</strong>
                        <br />
                    </f:if>
                    <f:if condition="{event.organizer.street}">
                        <span>{event.organizer.street}</span>
                        <br />
                    </f:if>

                    <span>{event.organizer.zip}</span>
                    <span>{event.organizer.city}</span>
                </td>
            </tr>
        </f:if>
        <f:if condition="{event.additionalInformation}">
            <tr>
                <th></th>
                <td>{event.additionalInformation -> f:format.nl2br()}</td>
            </tr>
        </f:if>

        <f:if condition="{event.link}">
            <tr>
                <th>
                    <f:translate
                        id="property.information"
                        package="Newland.Toubiz.Events.Neos"
                        source="Views/Events/Show" />

                </th>
                <td>
                    <p class="mt-4">
                        <a href="{event.link -> vh:format.prefix(query: 'http', prefix: 'http://')}" target="_blank">
                            {event.link}
                        </a>
                    </p>
                </td>
            </tr>
        </f:if>
        </tbody>
    </table>
</div>

<f:section name="EventDates">
    <f:for each="{event.upcomingEventDates}" as="date" iteration="iterator">
        <div class="{f:if(condition: iterator.isFirst, else: 'mt-1')}">
            <span>
                <f:format.date
                    date="{date.beginsAt}"
                    cldrFormat="E dd.MM.yyyy"
                    forceLocale="{node.context.dimensions.language.0}" />

            </span>

            <f:if condition="{date.beginsAtSpecificTime}">
                <span class="tb-tab-content__muted">
                    | {date.beginsAt -> f:format.date(format: 'H:i')}
                    <f:if condition="{date.endsAtSpecificTime}">
                        –
                        {date.endsAt -> f:format.date(format: 'H:i')}
                        {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}
                    </f:if>
                </span>
            </f:if>
        </div>
    </f:for>
</f:section>