{{ define "hero" }}
    <header class="header-hero header-hero-glow-bottom">
        <div class="container mx-auto">
            <div class="mx-auto text-center">
                <h1>{{ .Title }}</h1>
                {{ if .Params.subtitle }}
                    <p class="text-2xl">{{ .Params.subtitle }}</p>
                {{ else }}
                    <p class="text-2xl">Infrastructure as code with Pulumi</p>
                {{ end }}
            </div>
        </div>
    </header>
{{ end }}

{{ define "main" }}
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row p-10 md:px-20">
            <div class="w-full order-last md:order-first mx-auto">
                <h3>Event Details</h3>
                <div class="text-sm uppercase md:text-base">
                    <div class="my-1">
                        <i class="text-gray-800 fas fa-calendar w-8 mr-1 text-center"></i>
                        <span>
                            {{ if eq .Params.event.start_date .Params.event.end_date }}
                                {{ dateFormat "Mon, Jan 2" .Params.event.start_date }}
                            {{ else }}
                                {{ dateFormat "Mon, Jan 2" .Params.event.start_date }} -
                                {{ dateFormat "Mon, Jan 2" .Params.event.end_date }}
                            {{ end }}
                        </span>
                    </div>
                    <div class="my-1">
                        <i class="text-gray-800 fas fa-clock w-8 mr-1 text-center"></i>
                        <span>{{ .Params.event.time }}</span>
                    </div>
                    <div class="my-1">
                        <i class="text-gray-800 fas fa-map-marker-alt w-8 mr-1 text-center"></i>
                        <span>
                            <a href="https://maps.google.com/?q={{ .Params.event.location }}" target="_blank" class="text-blue-500">{{ .Params.event.location }}</a>
                        </span>
                    </div>
                    <div class="my-1">
                        <i class="text-gray-800 fas fa-ticket-alt w-8 mr-1 text-center"></i>
                        <span>{{ .Params.event.cost }}</span>
                    </div>
                    <div class="my-8">
                        {{ if .Params.event.calendly_url }}

                            <!-- Calendly link widget begin -->
                            <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" />
                            <script src="https://assets.calendly.com/assets/external/widget.js"></script>
                            <a
                                href="#"
                                class="btn bg-orange-500 border-2 border-orange-600 hover:bg-orange-600 hover:border-orange-600"
                                onclick="Calendly.initPopupWidget({url: '{{ .Params.event.calendly_url }}&hide_event_type_details=1'});return false;"
                                >Register Now</a
                            >
                            <!-- Calendly link widget end -->
                        {{ else if .Params.event.eventbrite_url }}
                            <!-- Noscript content for added SEO -->
                            <noscript
                                ><a href="{{ .Params.event.eventbrite_url }}" rel="noopener noreferrer" target="_blank">
                                    <button
                                        id="eventbrite-widget-modal-trigger-{{ .Params.event.eventbrite_id }}"
                                        type="button"
                                        class="btn bg-orange-500 border-2 border-orange-600 hover:bg-orange-600 hover:border-orange-600"
                                    >
                                        Buy Tickets
                                    </button> </a
                                >Buy Tickets on Eventbrite</noscript
                            >
                            <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>
                            <script>
                                if (window && window.EBWidgets && (typeof window.EBWidgets.createWidget === "function")) {
                                    window.EBWidgets.createWidget({
                                        widgetType: "checkout",
                                        eventId: "{{ .Params.event.eventbrite_id }}",
                                        modal: true,
                                        modalTriggerElementId: "eventbrite-widget-modal-trigger-{{ .Params.event.eventbrite_id }}",
                                        onOrderComplete: function() {
                                            window.location = "{{ relref . "/confirmation/workshop" }}";
                                        }
                                    });
                                }
                            </script>
                        {{ end }}
                    </div>
                </div>
                {{ .Content }}
            </div>
        </div>
    </div>

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