<div class="panel">
  <div class="outcome-header">
    <span class="outcome-glyph" [class]="outcome().glyphClass">{{ outcome().glyph }}</span>
    <span class="outcome-heading">{{ outcome().heading }}</span>
  </div>

  <div class="stats-row">
    <span class="stat-label">Survived</span>
    <span class="stat-value">{{ ticks() }} tick{{ ticks() === 1 ? '' : 's' }}</span>
  </div>

  <div class="survivors">
    @for (survivor of missionState().survivors; track survivor.id) {
      <div class="survivor-row">
        <span class="survivor-name">{{ survivor.name }}</span>
        <span class="survivor-state" [class]="survivor.state">{{ survivor.state }}</span>
      </div>
    }
  </div>

  @if (missionState().recentLog.length) {
    <div class="log" role="log" aria-label="Mission log">
      @for (entry of missionState().recentLog; track entry.tickIndex) {
        <div class="log-entry" [class.success]="entry.success" [class.failure]="!entry.success">
          <span class="log-glyph">{{ entry.success ? '▶' : '▷' }}</span>{{ entry.logText }}
        </div>
      }
    </div>
  }

  <button class="continue-btn" (click)="continueExpedition.emit()">
    Begin new expedition
  </button>
</div>
