{{ define "post" }}<main class="post-page">    <article class="post">        <header class="post-header">            <div class="post-title">                <h2>{{ .Data.Title }} <span>[#{{ .Data.ID }}]</span></h2>            </div>            <div class="post-meta">                <span>                    <a                        class="post-meta-link"                        href="/u/{{ .Data.AuthorUsername }}"                    >                        {{- .Data.AuthorUsername -}}                    </a>                </span>                <span> | {{ timeago .Data.CreatedAt }} </span>                <span>                    {{ if and .Session (eq .Data.AuthorID .Session.UserID) }} |                    edit {{ end }}                </span>            </div>        </header>        <div class="post-body">{{ .Data.Body }}</div>    </article>    {{ if .Session }}    <form        method="post"        action="/p/{{ .Data.ID }}/comment"        class="new-comment-form"    >        <input type="hidden" name="parent_id" value="" />        <textarea            minlength="1"            name="body"            id="comment_body"            placeholder="write a comment..."            required        >        {{- "" -}}        </textarea>        <button hx-post="/p/{{ .Data.ID }}/comment" type="submit">            comment        </button>    </form>    {{ else }}    <p><a class="subtle-link" href="/login">log in</a> to leave a comment</p>    {{ end }}    <section class="comments">        <h3>discussion</h3>        <div class="comments-inner">            {{ range .Data.Comments }} {{ template "comment" . }} {{ end }}        </div>    </section></main><style>    .post-page {        display: flex;        flex-direction: column;        gap: 2rem;    }    .post-meta-link {        color: var(--text-muted);    }    .post-title {        background-color: var(--surface);        & > h2 {            margin-bottom: 0.5rem;            font-weight: 400;            font-family: var(--font);        }        & > h2 > span {            color: var(--text-subtle);        }    }    .post-body {        margin-top: 1rem;        white-space: pre-wrap;    }    .post-meta {        font-size: 1rem;        color: var(--text-muted);    }    .new-comment-form {        display: flex;        padding: 0;        height: min-content;        & > textarea {            height: 3rem;            margin: 0;            flex: 1;            min-width: 0;        }        & > button {            border-left: 1px solid var(--border);            width: 20%;            flex: 0 0 auto;            min-width: 0;            margin: 0;            &:hover {                background-color: var(--surface-raised);                cursor: pointer;            }        }    }    .comments {        h3 {            margin: 0 0 0.5rem 0;            font-weight: 400;            font-family: var(--font);        }        & .comments-inner {            display: flex;            flex-direction: column;            gap: 1rem;        }    }    .comment {        padding-top: 0.75rem;        & > .comment-meta {            font-size: 0.75rem;            color: var(--text-muted);            & > button {                padding: 0;                border: 0;                background-color: transparent;                margin: 0;                color: var(--text-subtle);            }        }        & > .comment-children {            border-left: 1px solid var(--border);            padding-left: 1.5rem;        }        & .comment-reply-toggle {            text-decoration: underline;            cursor: pointer;        }        & .comment-reply-submit:hover {            cursor: pointer;        }    }</style>{{ end }}