<br/>

<div class="user__list" *ngIf="!ladderUsers.length">
  <p>No Organisations</p>
</div>

<div class="user__list" *ngIf="ladderUsers.length">
  <table class="table table-hover">
    <thead>
    <tr class="table-header-dark">
      <th>Position</th>
      <th>Name</th>
      <th>Challenged</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr class="hover-action-container" *ngFor="let rung of ladderUsers" uxHoverActionContainer>
      <td class="text-black">{{ rung.position }}</td>
      <td class="text-black">{{ rung.userName }}</td>
      <td>
          <i *ngIf="rung.isChallenged" class="hpe-icon hpe-checkmark" tooltip="Challenged"></i>
      </td>
      <td>
        <i *ngIf="rung.canChallenge"  class="hpe-icon hpe-target hover-action-icon" (click)="challenge(rung)" tooltip="Challenge" uxHoverAction></i>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<br/>

<div class="user__list" *ngIf="!ladderUsers.length">
  <p>The ladder is currently empty</p>
</div>

<div class="user__list" *ngIf="ladderUsers.length">
  <table class="table table-hover">
    <thead>
    <tr class="table-header-dark">
      <th>Position</th>
      <th>Name</th>
      <th>Challenged</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr class="hover-action-container" *ngFor="let rung of ladderUsers" uxHoverActionContainer>
      <td class="text-black">{{ rung.position }}</td>
      <td class="text-black">{{ rung.userName }}</td>
      <td>
          <i *ngIf="rung.isChallenged" class="hpe-icon hpe-checkmark" tooltip="Challenged"></i>
      </td>
      <td>
        <i *ngIf="rung.canChallenge"  class="hpe-icon hpe-target hover-action-icon" (click)="challenge(rung)" tooltip="Challenge" uxHoverAction></i>
      </td>
    </tr>
    </tbody>
  </table>
</div>

Improve description of empty ladder
Improve description of empty ladder
