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

<div smToggleRow class="settings-project__row" data-testid="settings-project-activity-capture-row">
  <div class="settings-project__row-text">
    <!-- `<label for>` + `[inputId]`: PrimeNG's inner `<input
         role="switch">` has NO accessible name unless it is paired with
         a label (or given ariaLabel / ariaLabelledBy), so without this
         the row announces as a bare "switch, off". -->
    <label class="settings-project__row-label" for="settings-project-activity-capture-switch"
      >{{ texts.project.activityCapture.label }}</label
    >
    <div class="settings-project__row-description">
      {{ texts.project.activityCapture.description }}
    </div>
    @if (captureBlocked()) {
      <div class="settings-project__row-meta">
        <span
          class="settings-project__meta-line"
          data-testid="settings-project-activity-capture-hook-hint"
        >
          {{ texts.project.activityCapture.hookHint }}
        </span>
      </div>
    }
  </div>
  <p-toggleswitch
    inputId="settings-project-activity-capture-switch"
    [ngModel]="captureEnabledView()"
    (ngModelChange)="onCaptureToggle($event)"
    [disabled]="captureToggleDisabled()"
    data-testid="settings-project-activity-capture-toggle"
  />
</div>

<p-confirmdialog />