<div class="container my-4">
  <h2 class="mb-4 text-center">Liste des Matchs</h2>

  <div class="row g-4">
    <div class="col-md-6" *ngFor="let match of matches">
      <div
        class="card shadow-sm border-start-5"
        [ngClass]="getMatchBorderColor(match.state)"
        style="cursor: pointer"
        (click)="goToMatchDetail(match.id)"
      >
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0">
              {{ match.city }} —
              <small class="text-muted">{{
                match.date | date : "longDate"
              }}</small>
            </h5>
            <span class="badge bg-light text-dark">{{ match.weapon }}</span>
          </div>

          <div class="d-flex justify-content-between align-items-center">
            <div class="text-start">
              <strong>{{ getPlayerName(match.player1ID) }}</strong>
              <span class="badge bg-primary ms-2">{{ match.score1 }}</span>
            </div>

            <div class="text-center text-muted">vs</div>

            <div class="text-end">
              <strong>{{ getPlayerName(match.player2ID) }}</strong>
              <span class="badge bg-primary ms-2">{{ match.score2 }}</span>
            </div>
          </div>

          <div class="mt-3">
            <span
              class="badge"
              [ngClass]="{
                'bg-secondary': match.state === MatchState.NOT_STARTED,
                'bg-warning text-dark': match.state === MatchState.ONGOING,
                'bg-success': match.state === MatchState.OVER
              }"
            >
              {{ getMatchStatusLabel(match.state) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
