<div class="bg--dim pa3 br3 tl">
    <div class="w-100 flex items-center">
        <div class="w-20 mw3 w3">
            <!-- Mobile avatar -->
            <div class="aspect-ratio--1x1 contain bg-center" style="background-image:url('{{ .Author.AvatarUrl }}');"></div>
        </div>
        <div class="pl3 flex flex-column">
            <div>
                <a class="username" href="{{ .Author.ProfileUrl }}" target="_blank">{{ .Author.Username }}</a>
                <!-- Mobile badges -->
                <div class="di ph1">
                    {{ if .Author.IsStaff }}
                        <div class="badge staff"></div>
                    {{ end }}
                </div>
            </div>
            {{ if and .Author.Name (ne .Author.Name .Author.Username) }}
                <div class="c--dim f7"> {{ .Author.Name }} </div>
            {{ end }}
            <div class="c--dim f7">
                {{ timehtml (relativedate .PostDate) .PostDate }}
                {{ if .Editor }}
                    <span class="pl3">
                        Edited by
                        <a class="name" href="{{ .Editor.ProfileUrl }}" target="_blank">{{ coalesce .Editor.Name .Editor.Username }}</a>
                        on {{ timehtml (absolutedate .EditDate) .EditDate }}
                        {{ with .EditReason }}
                            Reason: {{ . }}
                        {{ end }}
                    </span>
                {{ end }}
            </div>
        </div>
    </div>
    <div class="w-100 pt3">
        <div class="post-content overflow-x-auto">
            {{ .Content }}
        </div>
    </div>
</div>
