@if (systemRows$ | async; as rows) {
  <div class="card">
    <h2>System</h2>
    <div class="mt-4">
      <table>
        @for (row of rows; track trackByRowLabel($index, row)) {
          <tr>
            <td class="text-secondary align-top whitespace-nowrap pr-4 py-1" [ngClass]="row.class">{{ row.label }}</td>
            <td class="align-top line-break-anywhere py-1" [ngClass]="(row.class || '') + ' ' + (row.valueClass || '')" [style.color]="row.color || null" [attr.sensitive-data]="row.isSensitiveData ? '' : null" [appTooltip]="row.tooltip ?? ''">{{ row.value }}</td>
          </tr>
        }
      </table>
      <button class="btn btn-primary mt-5" (click)="identifyDevice()">
        Identify device
      </button>
    </div>
  </div>
}