{{ define "main" }}
<article>
    <header>
        <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral mb-12">
            {{ .Title | emojify }}
        </h1>
    </header>
    {{ .Content | emojify }}
    {{ range $.Site.Data.works }}
    <section class="mb-8">
        <h2 class="text-xl mb-8 pb-2 border-b-8 border-primary-500 inline-block">
            {{ .title }}
        </h2>

        {{ if .description }}
        <div class="prose dark:prose-light mb-8">
            {{ readFile (print "_data/works/realworld.md") | markdownify }}
        </div>
        {{ end }}

        <div class="grid md:grid-cols-2 gap-4">
            {{ range .projects }}
            <div class="flex flex-col gap-4 rounded border-2 border-primary-500 p-4 h-full">
                <div class="text-center">
                    <a href="https://github.com/{{ .repo }}" target="_blank">
                        <h3 class="pb-1 font-bold border-b-2 border-primary-500 inline-block">
                            {{ .title }}
                        </h3>
                    </a>
                </div>
                <div class="prose dark:prose-light flex-grow">
                    {{ readFile (print "_data/works/" .name ".md") | markdownify }}
                </div>
                <div class="flex justify-center gap-4">
                    <a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
                        href="https://github.com/{{ .repo }}" target="_blank" role="button">
                        {{ partial "icon.html" "github" }}
                    </a>
                    {{ if .demo }}
                    <a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
                        href="{{ .demo }}" target="_blank" role="button">
                        Demo
                    </a>
                    {{ end }}
                    {{ if .docs }}
                    <a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
                        href="{{ .docs }}" target="_blank" role="button">
                        Docs
                    </a>
                    {{ end }}
                </div>
            </div>
            {{ end }}
        </div>
    </section>
    {{ end }}
</article>
{{ end }}