{{define "header"}}
            <div class="row">
                <div class="col-xl-8">
                    <a href="/threads/{{.Thread.ID}}" class="text-secondary mb-2 mt-2 d-flex align-items-center">
                        <svg viewBox="0 0 8 16" width="8" height="16" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.5 3L7 4.5 3.25 8 7 11.5 5.5 13l-5-5 5-5z"></path>
                        </svg>
                        <span class="ml-2">Back</span>
                    </a>
                    <h1>{{.Post.Title}}</h1>
                    <p class="m-0">
                        {{.Post.Content}}
                    </p>
                </div>
            </div>
            {{end}}

                {{define "content"}}
                <div class="card mb-4">
                    <div class="text-right">
                        <form action="/threads/{{.Thread.ID}}/{{.Post.ID}}" method="POST">
                            {{.CSRF}}
                            <textarea name="content" class="form-control border-0 border-bottom-1 p-3 {{with .Form.Errors.Content}}is-invalid{{end}}"
                                placeholder="What are your thoughts?" rows="4">
                                {{- with .Form.Content}}{{.}}{{end -}}
                            </textarea>
                            <div class="border-top p-1">
                                <button class="btn btn-primary btn-sm">Comment</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 px-4">
                    {{range .Comments}}
                    <div class="d-flex my-4">
                        <div class="text-center flex-shrink-0" style="width: 1.5rem">
                            <a href="/comments/{{.ID}}/vote?dir=up" class="d-block text-body text-decoration-none">&#x25B2</a>
                            <div>{{.Votes}}</div>
                            <a href="/comments/{{.ID}}/vote?dir=down" class="d-block text-body text-decoration-none">&#x25BC</a>
                        </div>
                        <div class="pl-4">
                            <p class="card-text" style="white-space: pre-line;">{{.Content}}</p>
                        </div>
                    </div>
                    {{end}}
                </div>
                {{end}}