{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:comment><!-- Override default social metadata --></f:comment>
<v:variable.register.set name="forceSocialTitle" value="{event.name}"/>
<v:variable.register.set name="forceSocialDescription" value="{event.description}"/>
<f:if condition="{event.image}">
    <v:variable.register.set name="forceSocialImageUrl" value="{event.image}"/>
</f:if>

<div class="ot-show-event">

    <header>
        <h2 class="event-name"><f:translate key="event-details"/></h2>
        <f:link.action class="go-back"><i class="fa fa-list"> </i> <f:translate key="go-back-to-events-list"/></f:link.action>
    </header>

    <div class="event-content">

        <div class="event-poster">
            <f:if condition="{event.image}">
                <f:then>
                    <img src='{event.image}' alt="poster" />
                </f:then>
                <f:else>
                    <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
                </f:else>
            </f:if>
        </div>

        <div class="event-summary">
            <h3 class="event-name">{event.name}</h3>
            <f:if condition="{event.formattedDates}">
                <span class="event-dates">
                    <i class="fas fa-calendar-alt" style="width: 14px; margin-right: 5px;">
                    </i>{event.formattedDates}
                </span>
            </f:if>
            <f:if condition="{event.inlineFullAddress}">
                <span class="event-loc">
                    <i class="fas fa-map-marker-alt" style="width: 14px; margin-right: 5px; padding-top: 2px;">
                    </i>{event.inlineFullAddress}
                </span>
            </f:if>
            <span class="event-description">
                {f:format.nl2br(value: '{event.description}')}
            </span>
        </div>
    </div>

    <f:if condition="{event.longitude}">
        <f:then>
            <div class="event-map-container">
                <div id="event-map">
                    <i class="item-geodata" style="display: none;"
                       data-id="{event.id}"
                       data-long="{event.longitude}"
                       data-lat="{event.latitude}"
                       data-label="<b>{event.name}</b><br/>{event.locAndDate}">
                    </i>
                </div>
            </div>
        </f:then>
    </f:if>

    <f:render partial="Modern/ShareBar"/>
</div>