<div class="container mt-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="mb-0">Articole</h1>
    <button *ngIf="isAuthenticated()" class="btn btn-success" (click)="createArticle()">
      + Articol nou
    </button>
  </div>

  <div *ngIf="loading()" class="alert alert-info">Se incarca...</div>
  <div *ngIf="error()" class="alert alert-danger">{{ error() }}</div>

  <div *ngIf="!loading() && !error() && articles().length === 0" class="alert alert-warning">
    Nu sunt articole disponibile.
  </div>

  <div *ngIf="!loading() && !error()" class="row">
    <div *ngFor="let article of articles()" class="col-md-6 col-lg-4 mb-4">
      <div class="card h-100">
        <img *ngIf="article.imagePath"
             [src]="backendUrl + article.imagePath"
             alt="{{ article.title }}"
             class="card-img-top"
             style="height: 180px; object-fit: cover;">
        <div class="card-body">
          <h5 class="card-title">{{ article.title }}</h5>
          <p class="text-muted mb-2">{{ article.categoryName }}</p>
          <p class="card-text">{{ article.content | slice:0:120 }}...</p>
          <div *ngIf="article.tags.length" class="mb-2">
            <span *ngFor="let t of article.tags" class="badge bg-info me-1">{{ t.name }}</span>
          </div>
          <small class="text-muted d-block mb-2">
            Autor: {{ article.authorName }} &middot;
            {{ article.publishedAt | date:'dd MMM yyyy' }}
          </small>
          <button class="btn btn-sm btn-primary" (click)="viewArticle(article.id)">
            Detalii
          </button>
          <ng-container *ngIf="canModify(article)">
            <button class="btn btn-sm btn-warning ms-1" (click)="editArticle(article.id, $event)">
              Editeaza
            </button>
            <button class="btn btn-sm btn-danger ms-1" (click)="deleteArticle(article.id, $event)">
              Sterge
            </button>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
</div>
