{{ define "main" }}
<div class="container">
    <header class="page-header">
        <h1 class="page-title">{{ .Title }}</h1>
        {{ if .Params.description }}
        <p class="page-description">{{ .Params.description }}</p>
        {{ end }}
    </header>

    <div class="content">
        {{ .Content }}
    </div>

    {{ if .Params.related_mistakes }}
    <section class="related-section">
        <h2>Related Mistakes</h2>
        <div class="card-grid">
            {{ range .Params.related_mistakes }}
            {{ $mistake := . }}
            {{ with site.GetPage $mistake }}
            <article class="card">
                <div class="card-content">
                    <h3 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
                    <p class="card-excerpt">{{ .Summary }}</p>
                </div>
            </article>
            {{ end }}
            {{ end }}
        </div>
    </section>
    {{ end }}
</div>
{{ end }}