<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{ article.title }}</h1>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2 text-end">
            <span class="fs-5 text-primary">{{ article.createdAt | date: 'dd/MM/yyyy' }}</span>
        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <app-list-errors [errors]="errors"></app-list-errors>
    <div class="d-flex">
        {{ article.description }}
    </div>
    <div class="d-flex">
        {{ article.body }}
    </div>
    @if (article.tagList) {
    <mat-divider class="my-3"></mat-divider>
    <div class="d-flex">
        @for (tag of getArticleTags(); track tag) {
        <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
            <mat-icon class="align-middle me-1" fontIcon="tag"></mat-icon>
            {{ tag.name }}
        </span>
        }
    </div>
    }
</div>