{{#if events.length}}
    <ul>
        {{#each events}}
            <li>
                <article class="event-list-item">
                    <figure class="event-item-frame">
                        <img class="event-item-image"
                            src="{{#if image_url}}{{image_url}}{{else}}/events/images/placeholders/event-placeholder.jpg{{/if}}"
                            alt="{{event_name}}">
                    </figure>
                    <section class="event-item-details">
                        <div>
                            <header>
                                <h3 class="event-item-title">{{event_name}}</h3>
                            </header>
                            <p class="event-item-date">{{start_time.formatted}}</p>
                            <p class="event-item-location">{{#if locations.length}}{{locations.[0].formal_name}}{{/if}}
                            </p>
                        </div>
                        <footer>
                            {{#if ticket_url}}
                                <a class="event-item-link-1" href="{{ticket_url}}">
                                    <div>Tickets <span class="fas fa-arrow-right" aria-hidden="true"></span></div>
                                </a>
                            {{/if}}
                            <a class="event-item-link-2"
                                href="{{#if details_url}}{{details_url}}{{else}}/events/details/?event={{event_id}}&reservation={{reservation_id}}{{/if}}">
                                <div>Event Details<span class="fas fa-arrow-right" aria-hidden="true"></span></div>
                            </a>
                        </footer>
                    </section>
                </article>
            </li>
        {{/each}}
    </ul>
{{else}}
    <p class="no-events">No Upcoming Events Announced</p>
{{/if}}