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

    <header>
        <h2 class="event-name">{event.name}</h2>
        <f:link.action class="go-back"><i class="fa fa-list"> </i> Revenir à la liste des évènements</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">
            <table class="event-infos">
                <tr>
                    <td>Quand?</td>
                    <td>
                        {event.formattedDates}
                    </td>
                </tr>
                <tr>
                    <td>Où?</td>
                    <td>
                        {f:format.nl2br(value: '{event.fullAdress}')}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <p class="event-description">
        {f:format.nl2br(value: '{event.description}')}
    </p>
    <f:if condition="{event.longitude}">
        <f:then>
            <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>
        </f:then>
    </f:if>

</div>
