{{define "title"}}{{.Topic.Title}} - Help{{end}}
{{define "content"}}
<div style="display: flex; gap: 2rem;">
    <article style="flex: 1; min-width: 0;">
        {{if .Topic.Tags}}<div style="margin-bottom: 1rem;">{{range .Topic.Tags}}<span class="tag">{{.}}</span>{{end}}</div>{{end}}
        <div class="topic-body">{{renderMarkdown .Topic.Content}}</div>
    </article>

    <aside style="width: 220px; flex-shrink: 0;">
        {{if .Topic.Sections}}
        <div style="position: sticky; top: 1rem;">
            <h3 style="font-size: 0.85rem; color: var(--fg-muted); margin-top: 0;">On this page</h3>
            <ul style="list-style: none; padding-left: 0; font-size: 0.8rem;">
                {{range .Topic.Sections}}
                <li style="padding-left: {{multiply (sub .Level 1) 12}}px; margin: 0.3rem 0;">
                    <a href="#{{.ID}}" style="color: var(--fg-muted);">{{.Title}}</a>
                </li>
                {{end}}
            </ul>
        </div>
        {{end}}

        {{if .Topic.Related}}
        <div style="margin-top: 1.5rem;">
            <h3 style="font-size: 0.85rem; color: var(--fg-muted);">Related</h3>
            <ul style="list-style: none; padding-left: 0; font-size: 0.8rem;">
                {{range .Topic.Related}}
                <li style="margin: 0.3rem 0;"><a href="/topics/{{.}}">{{.}}</a></li>
                {{end}}
            </ul>
        </div>
        {{end}}
    </aside>
</div>
{{end}}