<canvas #progressBar id="counter" width="100" height="100" (mouseenter)="mes.style.display=''" (mouseleave)="mes.style.display='none'"></canvas>
<div id='message' #mes style="display:none" (mouseenter)="mes.style.display=''" (mouseleave)="mes.style.display='none'">
  <div *ngIf='counter <100'>
    <h3 class='title'>Setup workspace in Progress !!!!</h3>
    <p>Will get back with login credentials to launch the environment…</p>
  </div>
  <div *ngIf='counter>=100 && dataState.state === 2'>
    <h3 class='title'>Setup workspace Completed !!!!</h3>
    <table>
      <tbody>
        <tr>
          <th>
            Username
          </th>
          <th>
            {{dataState?.data?.adId}}
          </th>
        </tr>
        <tr>
          <th>
            Password
          </th>
          <th>
            P@ssw0rd
          </th>
        </tr>
        <tr>
            <th>
              Registration ID
            </th>
            <th>
                {{dataState?.data?.registrationCode}}
            </th>
          </tr>
      </tbody>
    </table>
    <div class='footer'>
      <a (click)='abortSandbox()'>Abort</a>
      <a (click)='launchOpen=!launchOpen' [href]='dataState?.data?.awsClientAccessUrl' target="_blank" rel='external'>Launch Environment</a>
    </div>
  </div>
  <div *ngIf='dataState?.state === 3'>
    <h3 class='title'>Setup workspace in Error !!!!</h3>
    <p>Something went wrong...</p>
  </div>
</div>
<div id="launch-enviroment" *ngIf='launchOpen'>
  <img src="{{imageUrl}}/assets/img/sandbox/close_icon_black@2x.png" alt="close" id="close-icon" (click)='launchOpen=!launchOpen'>
  <img src="{{imageUrl}}/assets/img/sandbox/Sandbox_Icon@2x.png" alt="sandbox" width="250" height="250">
  <p>Sandbox Workspace
  </p>
</div>
