<article
  class="agent-card"
  [class]="'agent-card--' + status()"
  [attr.aria-label]="'Agent card: ' + statusLabel() + ' status'"
  [style.--agent-status-color]="statusColorVar()"
  [style.--agent-status-bg]="statusBgVar()"
>
  <!-- Left border accent (4px, matching status color) -->
  <div class="agent-card__accent"></div>

  <!-- Card body -->
  <div class="agent-card__body">
    <!-- Header row: status dot + status label + channel + last activity -->
    <div class="agent-card__header">
      <div class="agent-card__status-row">
        <span
          class="status-dot agent-card__dot"
          [ngClass]="[statusDotClass()]"
          [attr.aria-label]="statusLabel() + ' status indicator'"
          role="status"
        ></span>
        <span class="agent-card__status-label" [style.color]="statusColorVar()">
          {{ statusLabel() }}
        </span>
      </div>
      <div class="agent-card__meta">
        @if (channel()) {
          <span class="agent-card__channel text-mono">
            <mat-icon class="agent-card__channel-icon" fontIcon="forum" [inline]="true"></mat-icon>
            {{ channel() }}
          </span>
        }
        <span class="agent-card__last-activity text-mono">{{ lastActivityText() }}</span>
      </div>
    </div>

    <!-- Task description -->
    @if (task()) {
      <p class="agent-card__task">{{ task() }}</p>
    }

    <!-- Progress bar -->
    @if (showProgress()) {
      <div class="agent-card__progress">
        <mat-progress-bar
          mode="determinate"
          [value]="progress()"
          [attr.aria-label]="'Task progress: ' + progress() + '%'"
        ></mat-progress-bar>
        <div class="agent-card__progress-info">
          <span class="text-mono">{{ progress() }}%</span>
        </div>
      </div>
    }

    <!-- Footer: session key (truncated) + jump button -->
    <div class="agent-card__footer">
      <span class="agent-card__session text-mono" [matTooltip]="sessionKey()">
        {{ sessionKey().length > 28 ? sessionKey().substring(0, 28) + '…' : sessionKey() }}
      </span>
      <button
        mat-icon-button
        class="agent-card__jump"
        [attr.aria-label]="'Jump to agent session'"
        matTooltip="Jump to session"
      >
        <mat-icon>arrow_forward</mat-icon>
      </button>
    </div>
  </div>
</article>