<div class="flex flex-col gap-2">
  <div class="flex gap-2 items-center">
    {{#noteq this.User.Username "[deleted]"}}
    <img src="{{this.User.Avatar}}" class="rounded-full" width="24" height="24" loading="lazy">
    <a href="/user/{{this.User.Username}}">
      <p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>{{this.User.Username}}</b></p>
    </a>
    {{/noteq}}
    {{#equal this.User.Username "[deleted]"}}
    <p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>[deleted]</b></p>
    {{/equal}}
  </div>
  <div>
    <p>{{{this.Comment}}}</p>
    <div class="flex gap-2">
      <span title="{{this.CreatedAt}}">{{this.RelTime}}</span>
      {{#if this.DeletedAt}}
      <span class="text-md">(deleted {{this.DeletedAt}})</span>
      {{/if}}
      |
      <img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px"> {{this.Upvotes}}
      <img class="invert icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px"> {{this.Downvotes}}
    </div>
  </div>
  {{#if this.Comments}}
  <div class="ml-4 p-2 border-solid border-l-2 border-slate-400">
    {{#each this.Comments}}
    {{> partials/comment }}
    {{/each}}
  </div>
  {{/if}}
</div>