{{ template "base.html" . }}

{{ define "content" }}
<div class="ph3 ph0-ns">
    <h1>Learn the Handmade way.</h1>

    <p>Dive into one of these topics and start learning.</p>

    <div class="flex flex-column flex-row-ns g3 mt3 mb4">
        <a href="#compilers" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
            <img src="{{ static "education/compilers.jpg" }}">
            <div class="pa3">
                <h2>Compilers</h2>
                <div>
                    Learn how programming languages are made.
                </div>
            </div>
        </a>
        <a href="#networking" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
            <img src="{{ static "education/networking.jpg" }}">
            <div class="pa3">
                <h2>Networking</h2>
                <div>
                    Learn how computers communicate, and how the internet actually works.
                </div>
            </div>
        </a>
        <a href="#time" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
            <img src="{{ static "education/time.jpg" }}">
            <div class="pa3">
                <h2>Time</h2>
                <div>
                    Get better at handling time, from calendars to timezones to clock sync.
                </div>
            </div>
        </a>
    </div>

    <h2>What makes us different?</h2>

    <div class="flex flex-column flex-row-ns g3 mb4">
        <div class="flex-fair bg--dim pa3 br2">
            <h3>Real material.</h3>
            
            We equip you to go straight to the source. Our guides are structured around books and articles written by experts. We give you high-quality material to read, and the context to understand it. You do the rest.
        </div>
        <div class="flex-fair bg--dim pa3 br3">
            <h3>For any skill level.</h3>
            
            Each guide runs the gamut from beginner to advanced. Whether you're new to a topic or have been practicing it for years, read through our guides and you'll find something new.
        </div>
        <div class="flex-fair bg--dim pa3 br3">
            <h3>Designed for programmers.</h3>
            
            We're not here to teach you how to program. We're here to teach you a specific topic.
        </div>
    </div>

    <h2>All Topics</h2>

    {{ range .Courses }}
        <div id="{{ .Slug }}" class="edu-course mv3 bg--dim pa3 br3">
            <h3>{{ .Name }}</h3>
            <div class="overflow-hidden">
                <div class="edu-articles ml3 pl3">
                    {{ range .Articles }}
                        <div class="edu-article mt3 relative {{ if not .Published }}coming-soon{{ end }}">
                            {{ if or (and $.User $.User.IsEduTester) .Published }}
                                <a href="{{ .Url }}"><h4>{{ .Title }}</h4></a>
                            {{ else }}
                                <h4>{{ .Title }} (coming soon)</h4>
                            {{ end }}
                            <div>{{ .Description }}</div>
                        </div>
                    {{ end }}
                </div>
            </div>
        </div>
    {{ end }}

    {{ if and .User .User.IsEduAuthor }}
        <div class="mt3">
            <b>SECRET AUTHOR COMMANDS:</b>
            <div><a href="{{ .RerenderUrl }}">Rerender all content</a></div>
            <div><a href="{{ .NewArticleUrl }}"><span class="big pr1">+</span> New Article</a></div>
        </div>
    {{ end }}
</div>
{{ end }}