<mat-toolbar color="#00CCFF">
  <a (click)="goToDashboard()" class="back">
    <mat-icon>arrow_back</mat-icon>
  </a>

  <span>{{pageName}}</span>
  <span class="fill-remaining-space"></span>
  <div class="usr-info-avatar" [appEmployeeLogout]='cardLogout'>
    <p>{{ initials }}</p>
  </div>
  <app-employee-logout hidden='false' #cardLogout></app-employee-logout>
</mat-toolbar>


<div class="container-flex">
  <div class="col-md-8">
    <!-- appTutorialStep tutorialName="technical-tutorial" tutorialStepOrder='0' -->
    <mat-card class="col-md-12" appTutorialStep [tutorialName]="tutorialName" [tutorialStepOrder]="0" [tutorialPosition]="'right'">

      <div class="content-wrapper" [innerHTML]="usecaseINFO?.usecaseDescription"></div>
      <app-tutorial-step-tooltip>
        Find the use case description for you to work on with the available pre-configured environment.
      </app-tutorial-step-tooltip>
    </mat-card>

    <div class="col-md-12 no-padding">
      <div class="download">
        <div class="dlgroup">
          <img src="{{imageUrl}}/assets/img/dashboard/dlicon.png" class="dlicon" />
          <a [href]= cliUrl class="dltext" download>Download Workspace Client</a>
        </div>
        <div class="completegroup">
          <button class="btn-candidate-primary" (click)="launch()" [disabled]="launchbuttonStatus" appTutorialStep [tutorialName]="tutorialName" [tutorialStepOrder]="3" [tutorialPosition]="'top'">
            Show Workspace Credentials
            <app-tutorial-step-tooltip>
                <!--On clicking of “Launch Environment” the application will take you to the next tab of preconfigured environment setup.-->
                On clicking of “Launch Workspace” the application will display the login credentials.
            </app-tutorial-step-tooltip>
          </button>
          <button class="btn-candidate-primary" [disabled]="completebuttonStatus" data-toggle="modal" data-target="#awsModal" appTutorialStep [tutorialName]="tutorialName" [tutorialStepOrder]="4" [tutorialPosition]="'top'">
            Completed
            <app-tutorial-step-tooltip>
                Once you complete the implementation its mandatory for you to come back to this Technical use case screen to click the submit button. On clicking you can see the Successfully completed message in your window.
            </app-tutorial-step-tooltip>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <!-- appTutorialStep tutorialName="technical-tutorial" tutorialStepOrder='1' -->
    <mat-card class="col-md-12 enviroments" appTutorialStep [tutorialName]="tutorialName" [tutorialStepOrder]="1" [tutorialPosition]="'left'">
      <h2>Pre Configured Enviroments</h2>

      <ul class="list-unstyled">
        <li *ngFor="let skill of userskilldetails?.pgUserSkillMapping">
          <mat-icon>done</mat-icon>
          {{skill.pgSkillTrackDtls.description}}
        </li>
      </ul>
      <app-tutorial-step-tooltip>
        Given usecase can be developed and implemented with our readily available pre configured environment.
      </app-tutorial-step-tooltip>
    </mat-card>

    <mat-card class="col-md-12 clearfix coach-card" appTutorialStep [tutorialName]="tutorialName" [tutorialStepOrder]="2" [tutorialPosition]="'left'">
      <h2>Assigned Coach</h2>
      <app-small-coach-profile [fullName]="coach?.fullName" [profilePic]="coach?.profilePic" [position]="coach?.position" [role]="coach?.role"></app-small-coach-profile>
      <a [href]="'mailto:' + coach?.email" mat-fab class="pull-right">
        <mat-icon>mail_outline</mat-icon>
      </a>
      <app-tutorial-step-tooltip>
        You can find your coach details and contact him to help/mentor you at any point of time.
      </app-tutorial-step-tooltip>
    </mat-card>

    <mat-card class="col-md-12 help-card" appTutorialStep [tutorialName]="tutorialName" [tutorialStepOrder]="5" [tutorialPosition]="'left'">
      <h2 (click)="showHelp()">
        <img src="{{imageUrl}}/assets/img/dashboard/Playground_selected_Icon.png"> Need Help?
      </h2>
      <app-tutorial-step-tooltip>
          You can always come back to this page in need of any help/instructions.
      </app-tutorial-step-tooltip>
    </mat-card>

    <mat-card class="col-md-12 workspace-credentials" *ngIf="workSpaceSuccess">
      <h2>Workspace login credentials</h2>
      <p>
        <label>Registration Code:</label>
        SLiad+2RRXG8
        <br>
        <label>User Id:</label>
        {{workSpaceData.adId}}
        <br>
        <label>Password:</label>
        P@ssw0rd
      </p>
    </mat-card>
  </div>
</div>

<div class="container bg col-md-12">


  <!-- <div class="maincontent" *ngIf="userDiv">

    <section class="Section">
      <h1 class="title">Business Use Cases</h1>
      <!--<h2 class="file-content"> File content Duplicate Count</h2>--!>

      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 journeyBlock">


        <div class="box">



          <p class="file-content-info" [innerHTML]="usecaseINFO.usecaseDescription"></p>
        </div>

        <div class="download">
          <div class="dlgroup">
            <img src="../../assets/img/dashboard/dlicon.png" class="dlicon" />
            <a [href]=c liUrl class="dltext" download>Download Workspace Client</a>
          </div>
          <div class="completegroup">
            <button class="submitbutton" [disabled]="completebuttonStatus" data-toggle="modal" data-target="#awsModal">Completed </button>
          </div>
        </div>



      </div>

      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 sidebar">



        <div class="instructionBlock">
          <div class="headerBlock">
            <p class="pleasenote">Please Note</p>
          </div>
          <div class="instructioncontainer">
            <div class="instructions">
              <ol type="1" style="font-weight:bold;">
                <li class="info1">
                  <span>You will be given 1 hour for completing this program, please adhere to the timeline.</span>
                </li>
                <li class="info1">
                  <span>Do not change the content of the input file.</span>
                </li>
                <li class="info1">
                  <span>Do not use any APIs to implement this.</span>
                </li>
                <li class="info1">
                  <span>Please write unit test cases to test the code written.</span>
                </li>
                <li class="info1">
                  <span>Please use eclipse formatter for better readability.</span>
                </li>
              </ol>
            </div>
          </div>


        </div>


        <div class="preEnviroment">
          <h5 class="prefigure">Pre Configured Enviroment</h5>
          <div class="buttonsBlock">
            <div class="skills" *ngFor="let skill of userskilldetails.pgUserSkillMapping">{{skill.pgSkillTrackDtls.description}}</div>


          </div>
        </div>


        <button class="launchbutton" (click)="launch()" [disabled]="launchbuttonStatus">Launch Live Environment</button>


      </div>
      <div class="registrationinfo" *ngIf="workSpaceSuccess">
        <label>RegistrationCode : SLiad+2RRXG8</label>
        <br>
        <label>User Id : {{workSpaceData.adId}}</label>
        <br>
        <label>Password : P@ssw0rd </label>
        <br>
      </div>

    </section>




  </div> -->

  <div class="bottomcontent"></div>
</div>

<!-- modal -->

<div id="awsModal" class="modal fade aws-modal" role="dialog">
  <div class="modal-dialog admin-modal-dialog">

    <!-- Modal content-->`
    <div class="modal-content">
      <div class="modal-header">
        <img src="{{imageUrl}}/assets/img/pgflow/exit_icon.png" class="close" data-dismiss="modal" />
        <h4 class="modal-title">Confirm Completed</h4>
      </div>
      <div class="modal-body">
        <h5> Have you finished the Use Case on the virtual workspace?</h5>
        <div class="modalbuttons">
          <button id="closeModal" class="modalbutton1" data-dismiss="modal">
            <p class="no"> No </p>
          </button>
          <button class="modalbutton2" data-dismiss="modal" (click)="complete()">
            <p class="yes"> Yes </p>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- modal toggle -->
<div #tutorialLauncher data-target="#tutorial-modal" data-toggle="modal"></div>

<div id="tutorial-modal" class="modal fade" role="dialog" data-backdrop="">
  <div class="modal-dialog">

    <!-- Modal content-->`
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-layout">
          <div class="img-container">
            <img src="{{imageUrl}}/assets/img/dashboard/Playground_selected_Icon.png">
          </div>
          <div class="text-container clearfix">
            <p>{{pageName}} enables to appreciate your development process for any given use case and hands on with framework environment.</p>
            <p>Please follow the walkthrough to know about the steps !!!!</p>

            <button data-dismiss="modal" (click)="startTutorial()">Continue</button>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>

<app-chat-footer></app-chat-footer>
