{{ 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 -->
    {{ $cesKeynotes := slice }}
    {{ $cesBuild := slice }}
    {{ $cesDeploy := slice }}
    {{ $cesManage := slice }}

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

            {{ if eq .Params.cloud_engineering_summit.track "build" }}
                {{ $cesBuild = $cesBuild | append . }}
            {{ end }}

            {{ if eq .Params.cloud_engineering_summit.track "deploy" }}
                {{ $cesDeploy = $cesDeploy | append . }}
            {{ end }}

            {{ if eq .Params.cloud_engineering_summit.track "manage" }}
                {{ $cesManage = $cesManage | append . }}
            {{ end }}
        {{ end }}
    {{ end }}


    <section class="container mx-auto my-12 relative">
        <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" "Keynotes" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cesKeynotes }}
                                            <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" "Build" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cesBuild }}
                                            <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" "Deploy" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cesDeploy }}
                                            <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" "Manage" "large_header" true) }}


                                <div class="accordion-item-body-no-animation text-base">
                                    <ul class="list-none p-0">
                                        {{ range $cesManage }}
                                            <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>

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


                                <div class="accordion-item-body-no-animation text-base">
                                    <p>
                                        {{ .Params.transcript | markdownify }}
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </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 }}