{{ define "hero" }}
    {{ partial "hero" (dict "title" .Params.title ) }}
{{ end }}

{{ define "main" }}
    <!-- Get the webinars as they contain the CES sessions -->
    {{ $webinars := (where $.Site.Pages "Type" "webinars") }}


    <!-- Create slices for each section of CES so we create the nav -->
    {{ $cedKeynote := slice }}
    {{ $cedCustomers := slice }}
    {{ $cedAutomation := slice }}
    {{ $cedBestPractices := slice }}

    {{ range sort $webinars ".Params.main.sortable_date" "asc" }}
        {{ if isset .Params "cloud_engineering_days" }}
            {{ if eq .Params.cloud_engineering_days.track "keynote" }}
                {{ $cedKeynote = $cedKeynote | append . }}
            {{ end }}

            {{ if eq .Params.cloud_engineering_days.track "customer_stories" }}
                {{ $cedCustomers = $cedCustomers | append . }}
            {{ end }}

            {{ if eq .Params.cloud_engineering_days.track "automate_deploy" }}
                {{ $cedAutomation = $cedAutomation | append . }}
            {{ end }}

            {{ if eq .Params.cloud_engineering_days.track "best_practices" }}
                {{ $cedBestPractices = $cedBestPractices | append . }}
            {{ end }}
        {{ end }}
    {{ end }}


    <section class="container mx-auto mt-4 mb-12 relative text-center">
        <h4 class="mb-4">Cloud Engineering Days 2022</h4>
        <div class="shape-background home-video-section">
            <div class="shape-container">
                <div class="circle-left"></div>
                <div class="circle-right"></div>
            </div>
        </div>
        <div class="card bg-white w-3/4 mx-auto" style="position: relative; padding-bottom: 40.25%; height: 0; overflow: hidden;">
            <iframe src="{{ .Params.main.youtube_url }}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen=""></iframe>
        </div>
    </section>

    <section class="relative mt-4 mb-16">
        <div class="shape-background home-build-section">
            <div class="shape-container">
                <div class="circle-left"></div>
                <div class="circle-center"></div>
                <div class="circle-right"></div>
            </div>
        </div>

        <div class="container mx-auto">
            <div class="flex flex-wrap">
                <div class="w-full lg:w-1/3 order-last lg:order-first p-3">
                    <div class="card bg-white p-3">
                        <h4>Watch more sessions</h4>

                        <ul class="list-none p-0" data-faq-type="faq-pricing">
                            <li class="accordion-item text-2xl py-3 border-b-2">
                                {{ partial "accordian-header" (dict "text" "Keynote" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cedKeynote }}
                                            <li>
                                                <a href="/resources/{{ .Params.url_slug }}/">{{ .Params.title }}</a>
                                            </li>
                                        {{ end }}
                                    </ul>
                                </div>
                            </li>

                            <li class="accordion-item text-2xl py-3 border-b-2">
                                {{ partial "accordian-header" (dict "text" "Customer Stories" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cedCustomers }}
                                            <li>
                                                <a href="/resources/{{ .Params.url_slug }}/">{{ .Params.title }}</a>
                                            </li>
                                        {{ end }}
                                    </ul>
                                </div>
                            </li>

                            <li class="accordion-item text-2xl py-3 border-b-2">
                                {{ partial "accordian-header" (dict "text" "Automate & Deploy" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cedAutomation }}
                                            <li>
                                                <a href="/resources/{{ .Params.url_slug }}/">{{ .Params.title }}</a>
                                            </li>
                                        {{ end }}
                                    </ul>
                                </div>
                            </li>

                            <li class="accordion-item text-2xl py-3">
                                {{ partial "accordian-header" (dict "text" "Infrastructure Best Practices" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cedBestPractices }}
                                            <li>
                                                <a href="/resources/{{ .Params.url_slug }}/">{{ .Params.title }}</a>
                                            </li>
                                        {{ end }}
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="w-full lg:w-2/3 order-first lg:order-last p-3">
                    <div class="card bg-white p-3">
                        <h4>Session Information</h4>

                        <div class="mb-8">
                            <p>{{ .Params.main.description | markdownify }}</p>

                            <h5>Presenters</h5>
                            <ul class="list-none p-0">
                                {{ range .Params.main.presenters }}
                                    <li class="mb-4">
                                        <div class="text-purple">{{ .name }}</div>
                                        <div class="text-sm">{{ .role }}</div>
                                    </li>
                                {{ end }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="my-32 container mx-auto px-3">
        <div class="w-full bg-violet-600 text-white rounded shadow p-16 text-center">
            <h2 class="text-white">Get started today</h2>
            <p class="text-white">Pulumi is open source and free to get started. Deploy your first stack today.</p>
            <div class="mt-16">
                <a class="btn-secondary" href="{{ relref . "/docs/get-started" }}">Get Started</a>
            </div>
        </div>
    </section>
{{ end }}