{{!-- 
    Displays a single event in the event overview table 
    
    Related JS module(s): eventOverviewModule.js
--}}
<div class="calendar-event">
    <div class="calendar-event__date-time">
        <p class="calendar-event__date-time__date">
            <span>
                {{{startDate}}} </span>
                {{#if endDate}}
                    {{#compare startDate '!==' endDate}}
                        {{#if translations.until}}{{{translations.until}}}{{else}}&ndash;{{/if}}<span>{{{endDate}}}</span>
                    {{/compare}}
                {{/if}}
        </p>
        <p class="calendar-event__date-time__time">
            {{{startTime}}}{{#if endTime}} &ndash; {{{endTime}}}{{/if}} {{{translations.timeSuffix}}}
        </p>
    </div>

    <div class="calendar-event__event-info">
        <p class="calendar-event__event-info__meta">
            {{#if category}}<span>{{{category}}}</span>{{/if}}
            {{#if organisation}}<span>{{{organisation}}}</span>{{/if}}
            {{#if location}}<span>{{{location}}}</span>{{/if}}
        </p>
        <p class="calendar-event__event-info__title" role="heading">
            <a href="{{eventLink}}">{{{title}}}</a>
        </p>
        {{#if attendanceNote}}
        <p class="calendar-event__event-info__additional-information">
            {{{attendanceNote}}}
        </p>
        {{/if}}
    </div>

    <div class="calendar-event__btn-wrapper">
        {{!-- Display download button for .ics file if available --}}
        {{#if icsAvailable}}
            <a href="#ics-download" class="btn__link ics-download-link" 
            data-event-title="{{{title}}}" 
            data-event-description="{{{description}}}"
            data-event-location="{{{location}}}"
            data-event-start-date-ts="{{{startDateTS}}}"
            data-event-start-time-ts="{{{startTime}}}"
            data-event-end-date-ts="{{{endDateTS}}}"
            data-event-end-time-ts="{{{endTime}}}">
                <div class="btn btn--icon  "><span class="icon icon-LMHIconcalendarblack"></span> </div>
            </a>
        {{/if}}
        {{!-- Display registration button if available --}}
        {{#if buttonLabel}}
            <a href="{{buttonLink}}" 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="{{{location}}}"
                data-event-start-date="{{{startDate}}}"
                data-event-start-time="{{{startTime}}}"
                data-event-end-date="{{{endDate}}}"
                data-event-end-time="{{{endTime}}}"
                data-event-url="#">
                <div class="btn grey-background">{{{buttonLabel}}}</div>
            </a>
        {{/if}}
    </div>
</div>