<div class="panel">
  <div class="main-row">
    <div class="lantern-wrap">
      <button
        class="lantern"
        [style.border-color]="stateMeta().color"
        (click)="lanternClick.emit()"
        [attr.aria-label]="'Open details for ' + (missionState().survivors[0]?.name ?? 'survivor')"
      >
        @if (avatarSrc() && !imgError()) {
          <img
            class="avatar-img"
            [src]="avatarSrc()!"
            [alt]="missionState().survivors[0]?.name ?? ''"
            (error)="imgError.set(true)"
          />
        } @else {
          <span class="avatar-initials">{{ initials() }}</span>
        }
      </button>
      <span
        class="state-badge"
        [style.color]="stateMeta().color"
        aria-hidden="true"
      >{{ stateMeta().label }}</span>
    </div>
    <div class="ticker">
      @if (latestLogLine(); as line) {
        <span class="log-line">{{ line }}</span>
      } @else {
        <span class="log-line idle">The fog stirs…</span>
      }
    </div>
  </div>

  @if (killerName(); as kn) {
    <div class="killer-strip">
      @if (killerAvatarSrc() && !killerImgError()) {
        <img
          class="killer-thumb"
          [src]="killerAvatarSrc()!"
          [alt]="kn"
          (error)="killerImgError.set(true)"
        />
      }
      <span class="killer-label">trial against {{ kn }}</span>
    </div>
  }
</div>
