@if (products.length > 0) {
  <div class="compare-table-wrap">
    <table class="compare-table">
      <thead>
        <tr>
          <th scope="col">{{ 'ux.compareAttribute' | translate }}</th>
          @for (product of products; track product.itemID) {
            <th scope="col">
              <div class="compare-product-title">{{ product.name }}</div>
            </th>
          }
        </tr>
      </thead>
      <tbody>
        @for (row of rows(); track row.key) {
          <tr [class.compare-different]="isDifferentRow(row)">
            <th scope="row">{{ row.label }}</th>
            @for (value of row.values; track $index) {
              <td>
                @if (row.key === 'color' && value !== '—') {
                  <span class="compare-colour-value">
                    <span class="compare-colour-swatch" [style.background-color]="value"></span>
                    {{ value }}
                  </span>
                } @else {
                  {{ value }}
                }
              </td>
            }
          </tr>
        }
      </tbody>
    </table>
  </div>
}