{{ define "main" }}
    <div class="container mx-auto flex items-start">
        <div class="w-8/12 mx-auto">
            <header class="container mx-auto my-8 px-4">
                {{ partial "docs/breadcrumb.html" . }}


                <h1>{{ .Title }}</h1>

                {{ if .Params.description }}
                    <p class="text-xl my-8">
                        {{ .Params.description }}
                    </p>
                {{ end }}
            </header>
            {{ partial "learn/media" (dict "context" .) }}
            <section class="container mx-auto my-8 px-4">
                {{ .Content }}
            </section>
            <section class="container mx-auto px-4">
                <div class="md:flex">
                    <div class="md:w-2/3">
                        <h4 class="mb-4">In this pathway, you'll learn:</h4>
                        <ul class="list-none p-0">
                            {{ range .Params.youll_learn }}
                                <li>
                                    <i class="fas fa-check text-green-500 mr-2"></i>
                                    <span>{{ . }}</span>
                                </li>
                            {{ end }}
                        </ul>
                    </div>
                    <div class="md:w-1/3">
                        <div class="rounded bg-gray-100 py-4 px-6 border-gray-300">
                            {{ partial "learn/summary" (dict "module" .) }}
                        </div>
                    </div>
                </div>
            </section>
            <section class="container mx-auto py-8 px-4">
                <h4 class="mb-4">Tutorials</h4>
                <div class="p-0 mb-12">
                    {{ partial "learn/topics" (dict "context" . "module" .) }}
                </div>
            </section>
        </div>
    </div>
{{ end }}