<div class="course-card" (click)="onClick()">
  <div class="card-header">
    <span class="community-badge">COMMUNAUTÉ</span>
    @if (isCompleted) {
      <span class="completed-badge">
        <span nz-icon nzType="check-circle" nzTheme="fill"></span>
        Terminé
      </span>
    } @else if (isEnrolled) {
      <span class="enrolled-badge">En cours</span>
    }
  </div>
  <div class="card-body">
    <h3 class="course-title">{{ course().title }}</h3>
    <p class="course-description">{{ course().description }}</p>
  </div>
  @if (isEnrolled) {
    <div class="card-progress">
      <div class="mc-progress-bar">
        <div class="mc-progress-fill" [style.width.%]="progressPercent"></div>
      </div>
      <span class="progress-label">{{ progressPercent }}%</span>
    </div>
  }
  <div class="card-footer">
    <span nz-icon nzType="user" nzTheme="outline" class="author-icon"></span>
    <span class="author-name">{{ course().creatorName }}</span>
    @if (course().topicCount > 0) {
      <span class="topic-count">· {{ course().topicCount }} sujet{{ course().topicCount > 1 ? 's' : '' }}</span>
    }
  </div>
</div>
