<div class="panel">
  <button class="close-btn" (click)="panelClose.emit()" aria-label="Close">✕</button>

  @if (survivor(); as s) {
    <div class="header">
      <div
        class="avatar"
        [style.border-color]="survivorStateColor()"
        aria-hidden="true"
      >
        @if (avatarSrc() && !imgError()) {
          <img
            class="avatar-img"
            [src]="avatarSrc()!"
            [alt]="s.name"
            (error)="imgError.set(true)"
          />
        } @else {
          <span class="avatar-initials">{{ initials() }}</span>
        }
      </div>
      <div class="header-info">
        <div class="survivor-name">{{ s.name }}</div>
        <div class="survivor-state" [class]="s.state">{{ s.state }}</div>
        <div class="perk-slots">
          @for (perk of s.perkSlots; track perk.id) {
            <span class="perk-chip">{{ perk.name }}</span>
          } @empty {
            <span class="perk-empty">No perks equipped</span>
          }
        </div>
      </div>
    </div>
  }

  @if (mission(); as m) {
    <div class="mission-strip">
      <div class="difficulty-pips" aria-label="Difficulty {{ m.difficulty }} of 3">
        @for (pip of difficultyPips(); track $index) {
          <div class="pip" [class.dim]="!pip"></div>
        }
      </div>
      <span class="mission-label">Mission</span>
      @if (killerName(); as kn) {
        <div class="killer-vs">
          @if (killerAvatarSrc() && !killerImgError()) {
            <img
              class="killer-thumb"
              [src]="killerAvatarSrc()!"
              [alt]="kn"
              (error)="killerImgError.set(true)"
            />
          }
          <span class="killer-name">vs {{ kn }}</span>
        </div>
      }
      <span class="tick-counter">T+{{ m.tickIndex }}</span>
    </div>
  }

  @if (missionState().mission.status === 'active') {
    <div class="abandon-row">
      @if (!confirmingAbandon()) {
        <button class="abandon-btn" (click)="confirmingAbandon.set(true)">Abandon mission</button>
      } @else {
        <span class="abandon-confirm-label">Leave the fog?</span>
        <button class="abandon-confirm-btn" (click)="abandonRequest.emit()">Confirm</button>
        <button class="abandon-cancel-btn" (click)="confirmingAbandon.set(false)">Cancel</button>
      }
    </div>
  }

  <div class="log" role="log" aria-label="Mission log" aria-live="polite">
    @for (entry of logEntries(); track entry.tickIndex; let i = $index) {
      <div
        class="log-entry"
        [class.success]="entry.success"
        [class.failure]="!entry.success"
        [style.opacity]="entryOpacity(i)"
      >
        <span class="log-glyph">{{ entry.success ? '▶' : '▷' }}</span>{{ entry.logText }}
      </div>
    }
  </div>
</div>
