<div class="campaigns-page">

  <div class="campaigns-hero">
    <lucide-icon [img]="Map" [size]="56" class="hero-icon"></lucide-icon>
    <h1>{{ 'campaigns.heroTitle' | translate }}</h1>
    <p class="hero-subtitle">{{ 'campaigns.heroSubtitle' | translate }}</p>
  </div>

  <div class="campaigns-grid">

    @for (campaign of campaigns; track campaign) {
      <div class="campaign-card" (click)="navigateToDetail(campaign.id!)">
        <div class="card-header">
          <span class="status-badge en-cours">{{ 'campaigns.statusInProgress' | translate }}</span>
          <span class="card-date">{{ 'campaigns.players' | translate:{ n: campaign.playerCount || 0 } }}</span>
        </div>
        <h2>{{ campaign.name }}</h2>
        <p class="card-description">{{ campaign.description }}</p>
        <div class="card-stats">
          <span>⚔️ {{ 'campaigns.arcs' | translate:{ n: campaign.arcCount || 0 } }}</span>
          <span>📖 {{ 'campaigns.chapters' | translate:{ n: campaign.chapterCount || 0 } }}</span>
        </div>
      </div>
    }

    <div class="campaign-card card-new" (click)="openCreateModal()">
      <div class="new-icon">
        <lucide-icon [img]="Plus" [size]="20"></lucide-icon>
      </div>
      <h2>{{ 'campaigns.newCampaign' | translate }}</h2>
      <p class="card-description">{{ 'campaigns.newCampaignSubtitle' | translate }}</p>
    </div>

  </div>

  <p class="tip">{{ 'campaigns.tip' | translate }}</p>

</div>

@if (showCreateModal) {
  <app-campaign-create
    (close)="onModalClose()"
    (created)="onCampaignCreated($event)">
  </app-campaign-create>
}
