<div class="table-container">
  <div class="table-header">
    <h3>Cross/Up Selling Scope</h3>
  </div>
  <div class="table-wrapper">
    <table class="data-table">
      <thead>
        <tr>
          <th (click)="sortTable('companyName')" class="sortable">
            Company Name
            <span class="sort-indicator" *ngIf="sortColumn === 'companyName'">
              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
            </span>
          </th>
          <th (click)="sortTable('contactPerson')" class="sortable">
            Contact Person
            <span class="sort-indicator" *ngIf="sortColumn === 'contactPerson'">
              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
            </span>
          </th>
          <th (click)="sortTable('product')" class="sortable">
            Product
            <span class="sort-indicator" *ngIf="sortColumn === 'product'">
              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
            </span>
          </th>
          <th (click)="sortTable('potentialValue')" class="sortable">
            Potential Value
            <span class="sort-indicator" *ngIf="sortColumn === 'potentialValue'">
              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
            </span>
          </th>
          <th (click)="sortTable('probability')" class="sortable">
            Probability
            <span class="sort-indicator" *ngIf="sortColumn === 'probability'">
              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
            </span>
          </th>
          <th (click)="sortTable('nextAction')" class="sortable">
            Next Action
            <span class="sort-indicator" *ngIf="sortColumn === 'nextAction'">
              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
            </span>
          </th>
          <th (click)="sortTable('actionDate')" class="sortable">
            Action Date
            <span class="sort-indicator" *ngIf="sortColumn === 'actionDate'">
              <clr-icon *ngIf="sortDirection === 'asc'" shape="arrow up"></clr-icon>
              <clr-icon *ngIf="sortDirection === 'desc'" shape="arrow down"></clr-icon>
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of crossSellingData; let i = index" [class.even]="i % 2 === 0">
          <td>{{ item.companyName }}</td>
          <td>{{ item.contactPerson }}</td>
          <td>{{ item.product }}</td>
          <td>{{ formatCurrency(item.potentialValue) }}</td>
          <td>
            <div class="probability-bar">
              <div class="probability-fill" [style.width.%]="item.probability" [style.background-color]="item.probability > 70 ? '#0a192f' : item.probability > 50 ? '#ff6b35' : '#64748b'"></div>
              <span class="probability-text">{{ formatProbability(item.probability) }}</span>
            </div>
          </td>
          <td>{{ item.nextAction }}</td>
          <td>{{ item.actionDate }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>