<div class="container my-4" *ngIf="match && player1 && player2">
  <h2 class="mb-4 text-center">Détail du Match</h2>

  <div
    class="card shadow border-start-5 border-{{
      getMatchStateColor(match.state)
    }}"
  >
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h5 class="mb-0">
          {{ match.city }}, {{ match.country }}
          <br />
          <small class="text-muted"
            >{{ match.date | date : "fullDate" }} -
            {{ match.date | date : "shortTime" }}</small
          >
        </h5>
        <span class="badge bg-light text-dark">{{ match.weapon }}</span>
      </div>

      <div class="d-flex justify-content-between align-items-center mt-3">
        <div class="text-start">
          <strong>{{ player1.firstName }} {{ player1.name }}</strong
          ><br />
          <small class="text-muted">{{ player1.club }}</small>
        </div>

        <div class="text-center">
          <ng-container
            *ngIf="
              authService.isAuthenticated() && match.state != 1;
              else displayScores
            "
          >
            <span
              class="badge bg-primary fs-4"
              style="cursor: pointer"
              (click)="incrementScore(1)"
            >
              {{ match.score1 }}
            </span>
            <span class="text-muted mx-2">vs</span>
            <span
              class="badge bg-primary fs-4"
              style="cursor: pointer"
              (click)="incrementScore(2)"
            >
              {{ match.score2 }}
            </span>
          </ng-container>

          <ng-template #displayScores>
            <span class="badge bg-primary fs-4">{{ match.score1 }}</span>
            <span class="text-muted mx-2">vs</span>
            <span class="badge bg-primary fs-4">{{ match.score2 }}</span>
          </ng-template>
        </div>

        <div class="text-end">
          <strong>{{ player2.firstName }} {{ player2.name }}</strong
          ><br />
          <small class="text-muted">{{ player2.club }}</small>
        </div>
      </div>

      <div class="mt-4">
        <span class="badge bg-{{ getMatchStateColor(match.state) }} p-2 fs-6">
          {{ getMatchStateLabel(match.state) }}
        </span>
      </div>

      <div class="mt-3">
        <h5>Arbitre</h5>
        <div *ngIf="referee">
          <p class="mb-0">
            <strong>{{ referee.firstName }} {{ referee.name }}</strong>
          </p>
          <p class="text-muted">
            Niveau : {{ getRefereeLevelLabel(referee.level) }}
          </p>
        </div>
        <div *ngIf="!referee">
          <p class="text-danger">Arbitre non trouvé.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Si erreur ou match introuvable -->
<div class="container my-5 text-center text-danger" *ngIf="!match">
  <p>Match non trouvé.</p>
</div>

<a (click)="goToMatchDel()" *ngIf="authService.isAuthenticated()">Delete</a>
