{{ define "hero" }}
    <header class="header-hero header-hero-glow-bottom">
        <div class="container mx-auto">
            <div class="mx-auto text-center">
                <h1>Upcoming Events</h1>
                <p>
                    {{ .Description }}
                </p>
            </div>
        </div>
    </header>
{{ end }}

{{ define "main" }}
    <div class="container mx-auto">
        <div class="flex justify-between py-10 md:py-24 md:pt-5 px-5 md:px-20">
            <div class="w-full md:w-8/12">
                <h2 id="event-list-heading" class="mb-8">All Upcoming Events</h2>
                <ul id="event-list" class="list-none md:flex md:flex-wrap pl-0">
                    {{ $events := (where $.Pages "Type" "events") }}
                    {{ range $index, $event := (sort $events ".Params.event.start_date") }}
                        {{ if and ((time .Params.event.end_date).After (now.AddDate 0 0 -1)) (ne .Params.unlisted true) }}
                            <li class="w-full m-0 p-0" data-event-type="{{ delimit .Params.event.type "," }}">
                                <article class="{{ if lt (add $index 1) (len $events) }}pb-16 mb-12 border-b border-gray-300{{ end }}">
                                    <h3>
                                        {{ if .Params.url_slug }}
                                            <a class="text-2xl" href="/events/{{ .Params.url_slug }}/">
                                                {{ .Params.title }}
                                            </a>
                                        {{ else }}
                                            <a class="text-2xl flex items-center" href="{{ .Params.event.registration_url }}" target="_blank">
                                                {{ .Params.title }}
                                                <i class="text-sm ml-2 fas fa-external-link-alt"></i>
                                            </a>
                                        {{ end }}
                                    </h3>
                                    <div>
                                        <i class="text-gray-800 far fa-calendar inline-block"></i>
                                        <span class="ml-1 text-sm uppercase">
                                            {{ if eq .Params.event.start_date .Params.event.end_date }}
                                                {{ dateFormat "Monday, Jan 2" .Params.event.start_date }}
                                            {{ else }}
                                                {{ dateFormat "Monday, Jan 2" .Params.event.start_date }} -
                                                {{ dateFormat "Mon, Jan 2" .Params.event.end_date }}
                                            {{ end }}
                                        </span>
                                    </div>
                                    <div>
                                        <i class="text-gray-800 fas fa-map-marker-alt"></i>
                                        <span class="ml-1 text-sm uppercase">
                                            {{ .Params.event.location }}
                                        </span>
                                    </div>
                                    <p class="my-4">
                                        {{ .Params.event.description }}
                                    </p>
                                    <div class="flex mt-2">
                                        <div class="w-full">
                                            <div class="event-tags">
                                                {{ if in .Params.event.type "workshop" }}
                                                    <span class="badge bg-orange-400 text-white">Workshop</span>
                                                {{ end }}
                                                {{ if in .Params.event.type "talk" }}
                                                    <span class="badge bg-orange-400 text-white">Talk</span>
                                                {{ end }}
                                                {{ if in .Params.event.type "booth" }}
                                                    <span class="badge bg-orange-400 text-white">Booth</span>
                                                {{ end }}
                                                {{ if in .Params.event.type "meetup" }}
                                                    <span class="badge bg-orange-400 text-white">MeetUp</span>
                                                {{ end }}
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </li>
                        {{ end }}
                    {{ end }}
                </ul>
            </div>
            <div class="hidden lg:inline-block w-3/12 px-5">
                <div id="eventFilter" class="p-4 text-sm border border-gray-300 rounded">
                    <h5>Filter</h5>
                </div>
                {{ partial "sidebar-cta" . }}
            </div>
        </div>
    </div>

    {{ partial "learnmore-contactus.html" . }}
{{ end }}