@if (isLoading()) {
  <h2 i18n>Publication content loading...</h2>
  <mat-spinner></mat-spinner>
} @else {
  @if (publication(); as publication) {
    <div class="card">
      <img src="/api/pictures/{{ publication.illustrationId }}"/>
      <header>
        <h1>{{ publication.title }}</h1>
        <h2>{{ publication.description }}</h2>
        @if (isAuthorAndUserEquals()) {
          <a [routerLink]="['edit']"
             class="button action"
             matTooltip="Click to edit the publication"
             matRipple
             i18n-matTooltip>
            <mat-icon>edit</mat-icon>
          </a>
        }
      </header>
      <main [innerHTML]="publication.parsedText"></main>
      <footer>
        <div class="metadata">
          <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
          <div class="posting-data">
            <span i18n>Publication posted by {{ publication.author.name }}</span>
            <span class="publication-date">
                            ({{ publication.creationDate | date: 'short' }})
                        </span>
          </div>
        </div>
        @if (isAuthorAndUserEquals()) {
          <button type="button"
                  (click)="deletePublication()"
                  matTooltip="Click to delete the publication"
                  matTooltipPosition="left"
                  matRipple
                  i18n-matTooltip>
            <mat-icon>delete</mat-icon>
            Delete
          </button>
        }
      </footer>
    </div>
  } @else {
    <div class="loading-failed">
      <h1 i18n>Publication failed to load...</h1>
    </div>
  }
}