@if (isLoading) {
    <h2 i18n>Publication content loading...</h2>
    <mat-spinner></mat-spinner>
} @else {
    @if (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>
    }
}