<div class="card margins">
  <h4 class="card-header">
    <a class="title" href="./?post={{content.filename}}">{{content.postTitle}}</a>
    <div class="timestamp" *ngIf="content.draft">
      <strong>Draft: Post not published.</strong>
    </div>

    <div class="timestamp" *ngIf="!!content.timestamp">
      <strong>Posted on</strong>&nbsp;{{content.timestamp}}
    </div>

    <div class="timestamp" *ngIf="!!content.editedTimestamp">
      <strong>Edited on</strong>&nbsp;{{content.editedTimestamp}}
    </div>
  </h4>
  <div class="card-body">
    <p class="card-text" [innerHTML]="generateHTML(content.postContent)"></p>
  </div>
</div>

<div class="profile-box" *ngIf="!!settings.username">
  <div class="avatar">
    <img src="./assets/{{settings.avatar}}" *ngIf="!!settings.avatar"><br>
  </div>
  <div class="bio-container">
    <div class="bio-username">{{settings.username}}</div>
    <div class="bio-text">{{settings.bio}}</div>
    <div class="social-networks">
      <a *ngIf="!!settings.twitter" href="{{settings.twitter}}" target="_blank">
        <img src="./assets/social/twitter.png">
      </a>
      <a *ngIf="!!settings.mastodon" href="{{settings.mastodon}}" target="_blank">
        <img src="./assets/social/mastodon.png">
      </a>
      <a *ngIf="!!settings.instagram" href="{{settings.instagram}}" target="_blank">
        <img src="./assets/social/instagram.png">
      </a>
      <a *ngIf="!!settings.youtube" href="{{settings.youtube}}" target="_blank">
        <img src="./assets/social/youtube.png">
      </a>
    </div>
  </div>
</div>

<div class="margin-y text-center" *ngIf="settings.username">
  <a href="./">
    <button type="button" class="margins-sides btn-secondary btn-fat">.HOME.</button>
  </a>

  <br />

  <a href="./?page=archives">
    <button type="button" class="margin-top margins-sides btn-primary btn-fat">
      .ARCHIVES.
    </button>
  </a>
</div>