<div class="container mt-5" style="max-width: 800px;">
  <div *ngIf="loading()" class="alert alert-info">Se incarca...</div>

  <div *ngIf="notFound()" class="text-center">
    <div class="alert alert-warning">Articolul nu a fost gasit.</div>
    <a routerLink="/articles" class="btn btn-secondary">Inapoi la lista</a>
  </div>

  <article *ngIf="article() as a">
    <a routerLink="/articles" class="btn btn-link p-0 mb-3">&larr; Inapoi la lista</a>
    <h1>{{ a.title }}</h1>
    <p class="text-muted">
      <span class="badge bg-secondary me-2">{{ a.categoryName }}</span>
      Autor: {{ a.authorName }} &middot;
      {{ a.publishedAt | date:'dd MMMM yyyy' }}
    </p>

    <img *ngIf="a.imagePath" [src]="backendUrl + a.imagePath" alt="{{ a.title }}"
         class="img-fluid rounded mb-3" style="max-height: 420px;">

    <hr>
    <div class="article-content" style="white-space: pre-wrap;">{{ a.content }}</div>

    <div *ngIf="a.tags.length" class="mt-4">
      <span *ngFor="let t of a.tags" class="badge bg-info me-1">{{ t.name }}</span>
    </div>
  </article>
</div>
