@if (skillError(); as err) {
  <p-message severity="error" [closable]="false" data-testid="settings-project-agent-skill-error">
    {{ texts.project.saveErrorPrefix }} {{ err }}
  </p-message>
}

@if (skillAnnouncement(); as msg) {
  <p-message severity="info" [closable]="false" data-testid="settings-project-agent-skill-announce">
    {{ msg }}
  </p-message>
}

@if (rowVisible()) {
  <!-- `is-stale`: the installed copy is older than the one this CLI
       ships. The row takes an attention stripe + tint, the label takes
       a chip, and the description switches to naming the reason, so the
       sidebar dot that brought the operator here pays off with an
       explanation and not just a differently-worded button. -->
  <div
    class="settings-project__row"
    [class.is-stale]="skillStale()"
    data-testid="settings-project-agent-skill-row"
  >
    <div class="settings-project__row-text">
      <div class="settings-project__row-label">
        {{ texts.project.agentSkill.label }}
        @if (skillStale()) {
          <span
            class="settings-project__attention-chip"
            data-testid="settings-project-agent-skill-stale-chip"
          >
            {{ texts.project.agentSkill.updateAvailableChip }}
          </span>
        }
      </div>
      <div class="settings-project__row-description">
        @if (skillStale()) {
          {{ texts.project.agentSkill.staleDescription }}
        } @else {
          {{ texts.project.agentSkill.description }}
        }
      </div>
      <!-- Shown only after an install / update actually wrote the file:
           the agent reads its skills at startup, so the fresh copy stays
           invisible to a session that is already running. Same wording
           as the MCP row's line, both name the AGENT and not `sm`. -->
      @if (restartPending()) {
        <div
          class="settings-project__row-restart-hint"
          data-testid="settings-project-agent-skill-restart-hint"
        >
          <i class="pi pi-refresh" aria-hidden="true"></i>
          {{ restartHint() }}
        </div>
      }
    </div>
    <div class="settings-project__row-actions">
      @if (skillUpToDate()) {
        <span
          class="settings-project__skill-uptodate"
          data-testid="settings-project-agent-skill-uptodate"
        >
          <i class="pi pi-check" aria-hidden="true"></i>
          {{ texts.project.agentSkill.upToDateLabel }}
        </span>
      } @else {
        <p-button
          [label]="skillActionLabel()"
          [disabled]="skillActionDisabled()"
          [severity]="skillStale() ? 'warn' : 'primary'"
          size="small"
          (onClick)="onSkillInstallClick()"
          data-testid="settings-project-agent-skill-button"
        />
      }
      @if (skillInstalled()) {
        <p-button
          [label]="texts.project.agentSkill.uninstallLabel"
          [disabled]="skillActionDisabled()"
          severity="secondary"
          [outlined]="true"
          size="small"
          (onClick)="onSkillUninstallClick()"
          data-testid="settings-project-agent-skill-uninstall"
        />
      }
    </div>
  </div>
}

<p-confirmdialog />