{{ 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-purple-500 inline-block">
            {{ .title }}
        </h2>

        <div class="prose dark:prose-invert mb-8">
            {{ readFile "data/works/realworld.md" | markdownify }}
        </div>

        <div>
            {{ range .projects }}
            {{ if .title }}
            <h3 class="pb-1 font-bold border-b-2 border-purple-500 inline-block mb-4">
                {{ .title }}
            </h3>
            {{ if .description }}
            <div class="prose dark:prose-invert mb-8">
                {{ readFile (print "data/works/" .description ".md") | markdownify }}
            </div>
            {{ end }}
            {{ end }}
            <div class="grid md:grid-cols-2 gap-4 mb-8">
                {{ range .apps }}
                {{ $borders := dict "green" "border-green-500" "blue" "border-blue-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
    "red" "border-red-500" "teal" "border-teal-500" "primary" "border-purple-500" }}
                <div class="flex flex-col gap-4 rounded border-2 p-4 {{ (index $borders (or .color "primary")) }}">
                    <div class="text-center">
                        <a href="{{ .demo }}" target="_blank">
                            <h4 class="pb-1 font-bold border-b-2 border-purple-500 inline-block">
                                {{ .title }}
                            </h4>
                        </a>
                    </div>
                    {{ if .date }}
                    <div class="flex justify-end">
                        {{ partial "badge.html" (print "Date : " .date) }}
                    </div>
                    {{ end }}
                    <div class="prose dark:prose-invert flex-grow">
                        {{ readFile (print "data/works/" .name ".md") | markdownify }}
                    </div>
                    <div class="flex justify-center gap-4">
                        {{ partial "button.html" (dict "text" (partial "icon.html" "github") "href" (print "https://github.com/" .repo) "color" .color) }}
                        {{ if .demo }}
                        {{ partial "button.html" (dict "text" "Demo" "href" .demo "color" .color) }}
                        {{ end }}
                        {{ if .docs }}
                        {{ partial "button.html" (dict "text" "Docs" "href" .docs "color" .color) }}
                        {{ end }}
                    </div>
                </div>
                {{ end }}
            </div>
            {{ end }}
        </div>
    </section>
    {{ end }}
</article>
{{ end }}