{{!-- 
    A detail page for an event (not currently used)
 --}}
<div class="layout-passepartout">
    {{!-- Event page image --}}
    <div class="ld-layout-item__wrapper">
        <div class="image-clipper image-clipper--2_1_max">
            <div class="image-clipper__contents image-clipper__contents--middle">
                <div class="image-wrapper image-wrapper-16x9">
                    <img src="{{{imageURL}}}" title="Image Title" alt="Image Alt Text">
                </div>
            </div>
        </div>
    </div>
</div>

{{!-- Event detail --}}
<div class="layout-event--sidebar event-detail">
    <div class="ld-layout-item__wrapper event-detail__metawrapper">
        <p class="event-detail__category">{{{category}}}</p>
        <h1 class="event-detail__title">{{{title}}}</h1>
        <div class="event-detail__meta">
        {{!-- Determinate wether it is a single, directly displayable appointment ... --}}
        {{#if singleAppointment}}
            <p class="event-detail__meta__appointments">
                <span class="icon icon-LMHIconcalendarblack"></span>
                <span class="event-detail__meta__appointments__meta">
                    <span>
                        {{{appointments.[0].startDate}}}
                        {{#if appointments.[0].endDate}}
                            {{#compare appointments.[0].startDate '!==' appointments.[0].endDate}}
                                {{#if translations.timeUntil}}{{{translations.timeUntil}}}{{else}}&ndash;{{/if}} {{{appointments.[0].endDate}}}
                            {{/compare}}
                        {{/if}} &sdot;
                        {{{appointments.[0].startTime}}}
                        {{#if appointments.[0].endTime}}
                            &ndash;
                            {{{appointments.[0].endTime}}} {{{translations.timeSuffix}}}
                        {{/if}} &sdot;
                        {{{appointments.[0].location}}}
                    </span>
                </span>
            </p>
            {{!-- ... or a series of appointments. Display those in a list --}}
           {{else if appointments}}
            <div class="dropdown event-detail__meta__appointments" data-placeholder="{{{translations.selectAppointment}}}">
                <select name="select-dropdown1">
                    {{#each appointments}}
                        <option value="{{{id}}}"
                        data-event-appointment-id="{{{id}}}"
                        data-event-location="{{{location}}}"
                        data-event-start-date="{{{startDate}}}"
                        data-event-start-date-ts="{{{startDateTS}}}"
                        data-event-start-time="{{{startTime}}}"
                        data-event-start-time-ts="{{{startTimeTS}}}"
                        data-event-end-date="{{{endDate}}}"
                        data-event-end-date-ts="{{{endDateTS}}}"
                        data-event-end-time="{{{endTime}}}"
                        data-event-end-time-ts="{{{endTimeTS}}}"
                        data-icon="icon-LMHIconcalendarblack">
                            <span>
                                {{{startDate}}}
                                {{#if endDate}}
                                    {{#compare startDate '!==' endDate}}
                                        {{#if ../translations.timeUntil}}{{{../translations.timeUntil}}}{{else}}&ndash;{{/if}} {{{endDate}}}
                                    {{/compare}}
                                {{/if}} &sdot;
                                {{{startTime}}}
                                {{#if endTime}}
                                    &ndash;
                                    {{{endTime}}} {{{../translations.timeSuffix}}}
                                {{/if}} &sdot;
                                {{{location}}}
                            </span>
                        </option>
                    {{/each}}
                </select>
            </div>
           {{/if}}
           {{!-- Additional information on registration --}}
           {{#if registrationNote}}
            <p class="event-detail__meta__registration-note">
                <span class="icon icon-LMHIconinfoblack"></span>
                {{{registrationNote}}}
            </p>
            {{/if}}
            {{!-- Additional information on attendance --}}
            {{#if attendanceNote}}
            <p class="event-detail__meta__attendance-note">
                <span class="icon icon-LMHIconusersblack"></span>
                {{{attendanceNote}}}
            </p>
            {{/if}}
        </div>

        {{!-- Detailled description --}}
        <p class="event-detail__description">
            {{{description}}}
        </p>

        {{!-- Registration and .ics download buttons --}}
        <div class="event-detail__buttons">
            <a href="#" class="btn__link event-registration"
                data-event-form="{{eventForm}}"
                data-event-id="{{id}}"
                data-event-title="{{{title}}}"
                data-event-category="{{{category}}}"
                data-event-organisation="{{{organisationId}}}"
                data-event-location="{{{appointments.[0].location}}}"
                data-event-start-date="{{{appointments.[0].startDate}}}"
                data-event-start-time="{{{appointments.[0].startTime}}}"
                data-event-end-date="{{{appointments.[0].endDate}}}"
                data-event-end-time="{{{appointments.[0].endTime}}}"
                data-event-url="#">
                <div class="btn btn--primary">{{{translations.signUp}}}</div>
            </a>
            
            <a href="#" class="btn__link ics-download-link"
                data-event-title="{{{title}}}"
                data-event-description="{{{description}}}"
                data-event-location="{{{appointments.[0].location}}}"
                data-event-start-date-ts="{{{appointments.[0].startDateTS}}}"
                data-event-start-time-ts="{{{appointments.[0].startTime}}}"
                data-event-end-date-ts="{{{appointments.[0].endDateTS}}}"
                data-event-end-time-ts="{{{appointments.[0].endTime}}}">
                <div class="btn no-background">{{{translations.save}}}</div>
            </a>
        </div>
    </div>

    {{!-- Sidebar --}}
    {{!-- TODO make dynamic
    <div class="ld-layout-item__wrapper">
        <div class="teaser teaser--card">
            <div class="image-wrapper ">
                <a href="#">
                    <div class="image-wrapper image-wrapper-16x9 media-player" data-video-url="middle">
                        <img src="img/resp-images/homepage/slider_01-16x9-320.png" srcset="img/resp-images/homepage/slider_01-16x9-320.png 320w,img/resp-images/homepage/slider_01-16x9-640.png 640w,img/resp-images/homepage/slider_01-16x9-960.png 960w,img/resp-images/homepage/slider_01-16x9-1920.png 1920w"
                            sizes="100vw" title="Image Title" alt="Image Alt Text">
                        <span class="media-player__media-icon"></span>
                    </div>
                </a>
            </div>
            <div class="teaser__content-wrapper">
                <h6>Global News</h6>
                <h3><a href="#" class="textlink ">Linde Service at it's best</a></h3>
                <div class="teaser__text-wrapper"></div>
            </div>
        </div>

        <div class="teaser teaser--overflow teaser--card">
            <div class="teaser__content-wrapper">
                <h6>Corporate News</h6>
                <h3><a href="#" class="textlink ">No Sitting on the Fence</a></h3>
                <div class="teaser__text-wrapper">
                    <p>
                        Winning Group Chief Logistics Officer, Alan Lewis, compiled comprehensive data
                        relating to throughputs and whitegoods types, sizes and weights to guide the
                        planning and understand how the new warehouse could look, how that layout would
                        work and what types of material handling equipment were required. Linde’s
                        STRATOS software program and simulations allowed Winning to see a virtual
                        “day in the life” of the proposed facility. It gave clear answers to specific
                        questions, presented in an easily understood manner for decision makers from
                        non-logistics backgrounds. Alan Lewis rated the process as “absolutely
                        excellent”, noting that “Linde also used its global experience as well as its
                        Australian resources to come up with a
                        solution for us.”
                    </p>
                    <a href="#" class="textlink">Learn more</a>
                </div>
            </div>
        </div>
    </div>--}}
</div>

<div class="closing-group">
    {{!-- TODO closing group --}}
</div>