<div id="progress_modal" *ngIf='launchOpen'>

  <img src="{{imageUrl}}/assets/img/sandbox/minimize@2x.png" alt="close" id="close-icon" [routerLink]='["../"]'>
  <!-- this.route.navigate(['employee/dashboard']); -->

  <img src="{{imageUrl}}/assets/img/sandbox/Sandbox_Icon@2x.png" alt="sandbox" width="250" height="250">
  <p class="title">Setup workspace in Progress !!!!
  </p>
  <p class="subtitle"> Will get back with login credentials to launch the environment…</p>
</div>
<div class="search-container">
  <a class="search-button">
    <mat-icon>search</mat-icon>
  </a>
</div>
<section class="cards-container">
  <div class="card-sandbox custom">
    <figure>
      <img src="{{imageUrl}}/assets\img\sandbox\Custom.png" alt="check" width="46px" height="46px">
    </figure>
    <p>Custom</p>
  </div>
  <div class="card-sandbox" *ngFor='let cardObj of  cardsCategories; let rowValue = index' #card (click)='selectActive(card,cardObj,rowValue)'>
    <div name='inner-card-flow' class="card-sandbox-major">
      <img src={{imageUrl}}\assets\img\sandbox\check@2x.png" alt="check" *ngIf='cardObj.selected'>
      <i *ngIf='cardObj.itemTecnologies.length > 4' class="dot-hover" (mouseenter)='hoverActive(card)' (mouseleave)='hoverActive(card)'>+{{cardObj.itemTecnologies.length-4}}</i>
      <p>{{cardObj.title}}</p>
      <article>
        <div *ngFor='let title of cardObj.itemTecnologies'>{{title}}</div>
      </article>
    </div>
  </div>

  <footer>
    <a routerLink='../'>
      <button class="btn-cancel">Cancel</button>
    </a>
    <button class="btn-setup" (click)="setupWorkspace()" [disabled]='!availableCreate'>Setup</button>
  </footer>
</section>
