{{ define "hero" }}
    <header class="page-hero">
        <div class="dot-background-container">
            <div class="dot-background"></div>
        </div>
        <div class="dot-overlay"></div>
        <div class="page-hero-title relative px-3">
            <img class="mx-auto mb-6 w-full lg:w-2/3" src="/images/cloud-eng-summit-2021.svg" />
        </div>
    </header>
{{ end }}

{{ define "main" }}
    <section class="relative mb-16">
        <div class="shape-background cloud-engineering-summit-big-dots">
            <div class="relative w-full h-full">
                <div class="circle-left"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="container mx-auto flex flex-wrap">
            <div class="w-full p-6">
                <h3 class="text-center">
                    <pulumi-datetime date="2022-09-28T08:00:00-07:00"></pulumi-datetime>
                </h3>
                <div class="max-w-4xl mx-auto text-center">
                    <p class="mt-10">
                        The Cloud Engineering Summit is a virtual day of learning for cloud practitioners that focuses on best practices for building, deploying and managing modern
                        cloud infrastructure.
                    </p>
                </div>
                <div class="text-center mt-12 mb-12">
                    <h3>Get notified when registration opens</h3>
                    <div class="flex items-center justify-center">
                        <pulumi-hubspot-form form-id="f456537d-1ac8-4004-8ba7-9f5997321445" class="newsletter newsletter-wide newsletter-dark-border"></pulumi-hubspot-form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="speakers" class="container mx-auto text-center">
        <h1 class="m-0">Cloud Engineering Summit</h1>
        <h2 class="mt-0 mb-10">2021 Featured Speakers</h2>
        <div class="my-10">
            <a class="btn-secondary" href="{{ relref . "/cloud-engineering-summit/speakers" }}">View all speakers from 2021</a>
        </div>

        <div class="cloud-engineering-summit-speaker-wall">
            <script type="text/javascript" src="https://sessionize.com/api/v2/{{ .Params.sessionize_id }}/view/SpeakerWall"></script>
        </div>
    </section>

    <section class="my-16 relative">
        <div class="shape-background cloud-engineering-summit-small-dots">
            <div class="relative w-full h-full">
                <div class="dot-background-container">
                    <div class="dot-background-overlay"></div>
                    <div class="dot-background no-animate"></div>
                </div>
            </div>
        </div>

        <div class="container mx-auto">
            <h2 class="text-center">2021 Summit Tracks</h2>
            <div class="text-center my-12">
                <a class="btn-secondary" href="{{ relref . "/cloud-engineering-summit/replay" }}">Watch the replay</a>
                <a class="btn-secondary" href="{{ relref . "/cloud-engineering-summit/agenda" }}">View the 2021 agenda</a>
            </div>

            {{ range $item := .Params.tracks_outline }}
                <div class="lg:flex my-16">
                    <div class="lg:w-1/2 lg:px-16">
                        <div class="p-6 lg:p-8 card mb-16 lg:mx-0 lg:ml-8 lg:mb-0 bg-white">
                            <h3>{{ $item.name }}</h3>

                            {{ range $topic := $item.topics }}
                                <p>{{ $topic }}</p>
                            {{ end }}
                        </div>
                    </div>

                    <div class="lg:w-1/2 px-10">
                        <p>
                            {{ $item.description }}
                        </p>
                    </div>
                </div>
            {{ end }}
        </div>
    </section>

    <section id="workshops" class="container mx-auto my-32">
        <h2 class="text-center mb-12">{{ .Params.workshops.title }}</h2>

        <div class="benefits-section relative">
            <div class="shape-background home-benefits-section">
                <div class="shape-container">
                    <div class="circle-left"></div>
                    <div class="circle-right"></div>
                </div>
            </div>

            <div class="flex flex-wrap items-stretch justify-center">
                {{ range $item := .Params.workshops.items }}
                    <div class="w-full lg:w-1/2 p-4 my-2">
                        <div class="card h-full text-center py-16 px-8 relative bg-white">
                            <div class="icon-section mb-4">
                                {{ partial "color-icon.html" (dict "icon" $item.icon "icon_color" $item.icon_color) }}
                            </div>
                            <div>
                                <h5>{{ $item.title }}</h5>
                            </div>
                            <div class="description">
                                <p>{{ $item.description }}</p>
                            </div>
                            <div class="mt-8">
                                {{ range $time := $item.times }}
                                    <p class="text-sm my-2">
                                        <span class="mr-2"><i class="fas fa-calendar"></i></span>
                                        <pulumi-datetime class="inline-block" date="{{ $time }}"></pulumi-datetime>
                                    </p>
                                {{ end }}
                            </div>
                            <div class="card-cta-btn">
                                <a href="{{ $item.link }}" class="btn-primary">Watch now</a>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
    </section>

    <section id="sponsors" class="container mx-auto mt-32">
        <h2 class="text-center">2021 Sponsors</h2>
        <div class="flex flex-wrap items-center justify-center">
            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4 h-32">
                <a href="https://aws.amazon.com/" target="_blank" rel="noopener noreferrer">
                    <img class="h-32" src="/logos/tech/aws-logo.svg" alt="Amazon Web Services" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4 h-32">
                <a href="https://www.apple.com/" target="_blank" rel="noopener noreferrer">
                    <img class="w-full" src="/logos/tech/apple-logo.png" alt="Apple" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4 h-32">
                <img class="h-16 lg:h-32" src="/logos/tech/bridgecrew-logo.svg" alt="Bridgecrew" />
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4 h-32">
                <a href="https://circleci.com/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/tech/ci-cd/circle-ci-wordmark.png" alt="Circle CI" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4 h-32">
                <a href="https://codefresh.io/" target="_blank" rel="noopener noreferrer">
                    <img class="h-16 lg:h-32" src="/logos/tech/ci-cd/codefresh-wordmark.png" alt="Codefresh" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://github.com/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/tech/github-wordmark.png" alt="Github" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://cloud.google.com/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/tech/google-cloud-ces.png" alt="Google Cloud" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://www.honeycomb.io/" target="_blank" rel="noopener noreferrer">
                    <img class="h-16 lg:h-32" src="/logos/tech/honeycomb-logo.svg" alt="Honeycomb" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://www.microsoft.com/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/tech/microsoft-logo.png" alt="Microsoft" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/tech/nginx-black.png" alt="NGINX" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://ns1.com/" target="_blank" rel="noopener noreferrer">
                    <img class="h-16" src="/logos/tech/ns1.png" alt="NS1" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="/">
                    <img class="h-16" src="/images/logo/logo-on-white.svg" alt="Pulumi" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://www.split.io/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/tech/split-logo.png" alt="Split" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://uffizzi.com/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/tech/uffizzi-logo.png" alt="Uffizzi" />
                </a>
            </div>

            <div class="w-full lg:w-1/5 flex items-center justify-center mx-8 my-4">
                <a href="https://whylabs.ai/" target="_blank" rel="noopener noreferrer">
                    <img class="w-2/3 lg:w-full mx-auto" src="/logos/customers/whylabs-wordmark.svg" alt="Whylabs" />
                </a>
            </div>
        </div>
    </section>

    <section id="get-started" class="container px-6 lg:px-0 mx-auto my-32">
        <div class="w-full bg-violet-600 card p-6 lg:p-16 lg:pt-24 text-center">
            <div class="max-w-xl mx-auto">
                <h2 class="text-white hidden lg:block px-0 lg:px-16">Get started with Cloud Engineering</h2>
                <h4 class="text-white mt-0 lg:hidden">Get started with Cloud Engineering</h4>
                <p class="text-white">
                    Pulumi is a cloud engineering platform that brings infrastructure, application development, and compliance teams together through a unified software engineering
                    process to deliver and manage modern cloud applications
                </p>
                <div class="mt-16">
                    <a class="btn-secondary" href="{{ relref . "/docs/get-started" }}">Get Started</a>
                </div>
            </div>
        </div>
    </section>
{{ end }}