{{# Events Page Template #}}
{{ layout = 'layouts/default' }}

{{# FEATURED EVENT - next upcoming, or most recent #}}
<section class="featured-event-section">
    <div class="container">
        <div class="row g-0">
            <div class="bg-white col-xl-2 col-lg-3 col-md-4 col-12 ms-auto">
                <h2 class="section-label text-uppercase text-center mb-0 py-4">Events</h2>
            </div>
        </div>
        {{ collection:events orderby="date:asc" limit="1" since="now" as="upcoming" }}{{ /collection:events }}

        {{ if upcoming }}
            {{ collection:events orderby="date:asc" limit="1" since="now" }}
                {{ partial:partials/featured-event :event="this" }}
            {{ /collection:events }}
        {{ else }}
            {{ collection:events orderby="date:desc" limit="1" }}
                {{ partial:partials/featured-event :event="this" }}
            {{ /collection:events }}
        {{ /if }}
    </div>
</section>

{{# ALL EVENTS GRID - 3 per row #}}
<section class="events-grid-section py-5">
    <div class="container">
        <div class="row g-4">
            {{ collection:events orderby="date:desc" as="all_events" }}
            {{ all_events }}
            <div class="col-lg-4 col-md-6">
                <article class="event-card h-100">
                    <a href="{{ url }}" class="event-card-link text-decoration-none d-flex h-100">
                        <div class="event-card-main d-flex flex-column justify-content-end text-center">
                            <div class="event-card-day">{{ date format="j" }}</div>
                            <div class="event-card-month-year">{{ date format="F Y" }}</div>
                            <div class="event-card-name">{{ title }}</div>
                        </div>
                        <div class="event-card-side d-flex flex-column justify-content-between">
                            <div class="event-card-timeago text-end">
                                <span class="timeago" data-date="{{ date format='Y-m-d' }}">-</span>
                                <small>ago</small>
                            </div>
                            <div class="event-card-location text-end">{{ location ?? 'Ferizaj' }}</div>
                        </div>
                    </a>
                </article>
            </div>
            {{ /all_events }}
            {{ /collection:events }}
        </div>
    </div>
</section>