<div *ngIf="service.status == 'ONLINE'">
  <div class="pagemain">
    <div class="pagesection">
      <div class="knowledge" *ngFor="let item of practicetestlist"
        [ngClass]="{ 'Dis-op': item.Ngclass,'completeBorder':item.c_date != '','overduedate':item.DueClassName=='overduedate' }">
        <div class="box-que">
          <p>
            <span>{{ item.practice_name }}</span>
          </p>
          <div class="dx-mw-flex">
            <div class="dx-flex" [ngClass]="{'opacityClass': item.Perntage == 0}">
              <svg viewBox="0 0 40 40" id="total-pros1" *ngIf="item.c_date != ''">
                <circle cx="20" cy="20" r="15.9" stroke-dasharray="100 0" stroke-offset="50" stroke-width="3">
                </circle>
                <circle cx="20" cy="20" r="15.9" attr.stroke-dasharray="{{item.resultcount}}" stroke-width="3">
                </circle>
              </svg>
              <div class="centerper" id="total-pros1" *ngIf="item.c_date != ''">
                <span>{{ item.CompletedPer }}<span class="ranked">%</span></span>
                <span>Score</span>
              </div>
              <div class="Progress-Flex" *ngIf="item.c_date == ''">
                <div class="progress-label">In Progress</div>
                <div class="flexed">
                  <div class="progress-bar" id="total-pros1">
                    <div class="progress-correct" [ngStyle]="{ 'width.%': item.Perntage  }"></div>
                  </div>
                  <div id="total-pros1" *ngIf="item.c_date == ''"
                    [ngClass]="{'overduedate':item.DueClassName=='overduedate' ,'centerper':item.DueClassName!='overduedate'}">
                    <span>{{ item.Perntage }}<span class="ranked">%</span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="mw-45" [ngClass]="{'FlexContantClass': item.Perntage > 0}">
              <div class="date-progess">
                <div class="datesec" *ngIf="item.c_date != ''">
                  <p class="lable">{{ item.label }}</p>
                  <p class="value">
                    <span>
                      <svg viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd"
                          d="M7.5 0C3.63286 0 0.5 3.13324 0.5 7C0.5 10.8668 3.63286 14 7.5 14C11.3657 14 14.5 10.866 14.5 7C14.5 3.13397 11.3657 0 7.5 0ZM7.5 1.23669C10.6827 1.23669 13.2633 3.81701 13.2633 7C13.2633 10.183 10.6827 12.7633 7.5 12.7633C4.3159 12.7633 1.73669 10.1838 1.73669 7C1.73669 3.81621 4.3159 1.23669 7.5 1.23669ZM7.83418 3.85653C7.79001 3.55835 7.53299 3.32956 7.22254 3.32956C6.88103 3.32956 6.60419 3.6064 6.60419 3.94791V7L6.61287 7.10329C6.63584 7.23885 6.70358 7.36398 6.80681 7.45774L9.03082 9.34789L9.11051 9.40934C9.36022 9.57139 9.69764 9.53341 9.90428 9.30589L9.96572 9.2262C10.1278 8.97649 10.0898 8.63906 9.86227 8.43242L7.84025 6.72571L7.84088 3.94791L7.83418 3.85653Z" />
                      </svg>
                    </span>
                    <span class="color-days">{{ item.CompletedDate | date }}</span>
                  </p>
                </div>
                <div class="datesec" *ngIf="item.c_date == ''">
                  <p class="lableS">{{ item.label }}</p>
                  <p class="value">
                    <span class="color-days">
                      <svg viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd"
                          d="M7.5 0C3.63286 0 0.5 3.13324 0.5 7C0.5 10.8668 3.63286 14 7.5 14C11.3657 14 14.5 10.866 14.5 7C14.5 3.13397 11.3657 0 7.5 0ZM7.5 1.23669C10.6827 1.23669 13.2633 3.81701 13.2633 7C13.2633 10.183 10.6827 12.7633 7.5 12.7633C4.3159 12.7633 1.73669 10.1838 1.73669 7C1.73669 3.81621 4.3159 1.23669 7.5 1.23669ZM7.83418 3.85653C7.79001 3.55835 7.53299 3.32956 7.22254 3.32956C6.88103 3.32956 6.60419 3.6064 6.60419 3.94791V7L6.61287 7.10329C6.63584 7.23885 6.70358 7.36398 6.80681 7.45774L9.03082 9.34789L9.11051 9.40934C9.36022 9.57139 9.69764 9.53341 9.90428 9.30589L9.96572 9.2262C10.1278 8.97649 10.0898 8.63906 9.86227 8.43242L7.84025 6.72571L7.84088 3.94791L7.83418 3.85653Z" />
                      </svg>
                    </span>
                    <span class="color-days">{{ item.dateset | date }}</span>
                  </p>
                  <p class="dueday">{{ item.DayGo}}</p>
                </div>
              </div>

            </div>
          </div>
          <div class="totalvalue-sec">
            <div class="total-que" [ngClass]="{ 'mw-50': item.c_date == '' }">
              <p class="val">{{ item.domains }}</p>
              <p class="lable">Domain</p>
            </div>
            <div class="total-que" [ngClass]="{ 'mw-50': item.c_date == '' }">
              <p class="val">{{ item.total }}</p>
              <p class="lable">Questions</p>
            </div>
          </div>
          <div class="take-test" *ngIf="item.c_date == ''">
            <div class="w-100"
              *ngIf="item.c_date == '' && item.Ngclass && item.currect + item.wrong == 0  && (course_type=='subscription' || course_type=='onetime')">
              <button class="btncissp" (click)="OpenCatModel(item)">Take Test</button>
            </div>
            <div class="w-100" *ngIf="item.c_date == '' && !item.Ngclass && item.currect + item.wrong == 0">
              <button class="btncissp" (click)="OpenCatModel(item)">
                Take Test
              </button>
            </div>
            <div class="w-100"
              *ngIf="item.c_date == '' && (!item.Ngclass || item.Ngclass) && item.currect + item.wrong > 0">
              <button class="btncissp" (click)="resumetest(item)">
                Resume Test
              </button>
            </div>
          </div>
          <div class="view-results" *ngIf="item.c_date != ''">
            <button (click)="viewresult(item)">Summary And Results</button>
            <div class="relate_title">
              <button class="history-btn" (click)="ViewSummery(item)" *ngIf="item.ViewSummeryicon==1">
                <mat-icon class="mat-color">history</mat-icon>
                <span>View Previous Results</span>
              </button>

              <div class="view_titleed">
                <h1>View Previous Results</h1>
              </div>
            </div>

            <div class="relate_title">
              <button class="history-btn" (click)="showReset(item)">
                <mat-icon class="mat-color">replay</mat-icon>
                <span>Retake Assessment</span>
              </button>

              <div class="view_titleed">
                <h1>Retake Assessment</h1>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="knowledge-box hiddenClass" *ngFor="let item of practicetestlist"
        [ngClass]="{ 'Dis-op': item.Ngclass }">
        <div class="box-que">
          <p>
            <span>{{ item.practice_name }}</span>
          </p>
        </div>
        <div class="box-detail">
          <div class="d-flex">
            <div class="mw-45" [ngClass]="{ 'mw-100': item.c_date == '' }">
              <div class="date-progess">
                <div class="datesec" *ngIf="item.c_date != ''">
                  <p class="lable">{{ item.label }}</p>
                  <p class="value">
                    <span>
                      <svg viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd"
                          d="M7.5 0C3.63286 0 0.5 3.13324 0.5 7C0.5 10.8668 3.63286 14 7.5 14C11.3657 14 14.5 10.866 14.5 7C14.5 3.13397 11.3657 0 7.5 0ZM7.5 1.23669C10.6827 1.23669 13.2633 3.81701 13.2633 7C13.2633 10.183 10.6827 12.7633 7.5 12.7633C4.3159 12.7633 1.73669 10.1838 1.73669 7C1.73669 3.81621 4.3159 1.23669 7.5 1.23669ZM7.83418 3.85653C7.79001 3.55835 7.53299 3.32956 7.22254 3.32956C6.88103 3.32956 6.60419 3.6064 6.60419 3.94791V7L6.61287 7.10329C6.63584 7.23885 6.70358 7.36398 6.80681 7.45774L9.03082 9.34789L9.11051 9.40934C9.36022 9.57139 9.69764 9.53341 9.90428 9.30589L9.96572 9.2262C10.1278 8.97649 10.0898 8.63906 9.86227 8.43242L7.84025 6.72571L7.84088 3.94791L7.83418 3.85653Z" />
                      </svg>
                    </span>
                    {{ item.CompletedDate | date }}
                  </p>
                </div>
                <div class="datesec" *ngIf="item.c_date == ''">
                  <p class="lableS">{{ item.label }}</p>
                  <p class="value">
                    <span class="color-days">
                      <svg viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd"
                          d="M7.5 0C3.63286 0 0.5 3.13324 0.5 7C0.5 10.8668 3.63286 14 7.5 14C11.3657 14 14.5 10.866 14.5 7C14.5 3.13397 11.3657 0 7.5 0ZM7.5 1.23669C10.6827 1.23669 13.2633 3.81701 13.2633 7C13.2633 10.183 10.6827 12.7633 7.5 12.7633C4.3159 12.7633 1.73669 10.1838 1.73669 7C1.73669 3.81621 4.3159 1.23669 7.5 1.23669ZM7.83418 3.85653C7.79001 3.55835 7.53299 3.32956 7.22254 3.32956C6.88103 3.32956 6.60419 3.6064 6.60419 3.94791V7L6.61287 7.10329C6.63584 7.23885 6.70358 7.36398 6.80681 7.45774L9.03082 9.34789L9.11051 9.40934C9.36022 9.57139 9.69764 9.53341 9.90428 9.30589L9.96572 9.2262C10.1278 8.97649 10.0898 8.63906 9.86227 8.43242L7.84025 6.72571L7.84088 3.94791L7.83418 3.85653Z" />
                      </svg>
                    </span>
                    {{ item.dateset | date }}
                    <span class="color-days">{{ item.statusExam }}</span>
                  </p>
                </div>
              </div>
              <div class="totalvalue-sec">
                <div class="total-que" [ngClass]="{ 'mw-50': item.c_date == '' }">
                  <p class="val">{{ item.domains }}</p>
                  <p class="lable">Domain</p>
                </div>
                <div class="total-que" [ngClass]="{ 'mw-50': item.c_date == '' }">
                  <p class="val">{{ item.total }}</p>
                  <p class="lable">Questions</p>
                </div>
              </div>
            </div>
            <div *ngIf="item.c_date !== ''">
              <div class="svgheight">
               <svg viewBox="0 0 40 40" id="total-pros">
                  <circle cx="20" cy="20" r="15.9" stroke-dasharray="100 0" stroke-offset="50"></circle>
                  <circle cx="20" cy="20" r="15.9" [attr.stroke-dasharray]="item.circlecount"></circle>                 
                </svg>
                <div class="centerper">
                  <span>{{ item.Perntage }}<span class="ranked">%</span></span>
                  <span>Score</span>
                </div>
              </div>
            </div>
          </div>
          <div class="take-test" *ngIf="
            item.c_date == '' && !item.Ngclass && item.currect + item.wrong == 0
          ">
            <button class="btncissp" (click)="OpenCatModel(item)">
              Start Test
            </button>
          </div>
          <div class="take-test" *ngIf="
            item.c_date == '' && !item.Ngclass && item.currect + item.wrong > 0
          ">
            <button class="btncissp" (click)="resumetest(item)">
              Resume Test
            </button>
          </div>
          <div class="take-test" *ngIf="item.c_date == '' && item.Ngclass">
            <button class="btncissp" disabled="true">Start Test</button>
          </div>
          <div class="view-results" *ngIf="item.c_date != ''">
            <button (click)="viewresult(item)">View Results</button>
            <button (click)="showReset(item)">
              <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 460.801 460.801"
                style="enable-background: new 0 0 460.801 460.801; fill: #7972b3" xml:space="preserve">
                <g>
                  <g>
                    <path
                      d="M231.298,17.068c-57.746-0.156-113.278,22.209-154.797,62.343V17.067C76.501,7.641,68.86,0,59.434,0 S42.368,7.641,42.368,17.067v102.4c-0.002,7.349,4.701,13.874,11.674,16.196l102.4,34.133c8.954,2.979,18.628-1.866,21.606-10.82 c2.979-8.954-1.866-18.628-10.82-21.606l-75.605-25.156c69.841-76.055,188.114-81.093,264.169-11.252 s81.093,188.114,11.252,264.169s-188.114,81.093-264.169,11.252c-46.628-42.818-68.422-106.323-57.912-168.75 c1.653-9.28-4.529-18.142-13.808-19.796s-18.142,4.529-19.796,13.808c-0.018,0.101-0.035,0.203-0.051,0.304 c-2.043,12.222-3.071,24.592-3.072,36.983C8.375,361.408,107.626,460.659,230.101,460.8 c122.533,0.331,222.134-98.734,222.465-221.267C452.896,117,353.832,17.399,231.298,17.068z" />
                  </g>
                </g>                
              </svg>
            </button>
          </div>
         </div>
      </div>
      <div class="prac_test" *ngIf="PaymentAccess">
        <div class="center_set">
          <div class="svg_icon">
            <svg _ngcontent-ier-c84="" viewBox="0 0 25 25 " fill="none " xmlns="http://www.w3.org/2000/svg "
              style="width: 28px; height: 28px;">
              <path _ngcontent-ier-c84="" fill-rule="evenodd " clip-rule="evenodd "
                d="M17.159 22.5804L14.1838 23.6601L14.8389 20.5636L20.8901 13.6026L23.2101 15.6193L17.159 22.5804Z "
                stroke="#fff " stroke-width="1.4 " stroke-linecap="round " stroke-linejoin="round "></path>
              <path _ngcontent-ier-c84="" d="M8.76697 6.96094L6.28636 9.56458L4.86914 8.26276 " stroke="#fff "
                stroke-width="1.4 " stroke-linecap="round " stroke-linejoin="round "></path>
              <path _ngcontent-ier-c84=""
                d="M9.32686 22.5217H2C1.44771 22.5217 1 22.074 1 21.5217V2C1 1.44772 1.44772 1 2 1L14.7946 1L18.9348 4.79795V9.96715 "
                stroke="#fff " stroke-width="1.4 " stroke-linecap="round " stroke-linejoin="round "></path>
              <path _ngcontent-ier-c84="" d="M8.76697 12.2871L6.28636 14.8908L4.86914 13.5889 " stroke="#fff "
                stroke-width="1.4 " stroke-linecap="round " stroke-linejoin="round "></path>
              <path _ngcontent-ier-c84="" d="M11.9404 14.0978H14.4013 " stroke="#fff " stroke-width="1.4 "
                stroke-linecap="round " stroke-linejoin="round "></path>
              <path _ngcontent-ier-c84="" d="M11.9404 8.77165H14.4013 " stroke="#fff " stroke-width="1.4 "
                stroke-linecap="round " stroke-linejoin="round "></path>
            </svg>
            <h1>Practice Tests</h1>
          </div>
          <div class="h4_div">
            <h4>Our course includes practice tests with questions that closely mimic real exam
              questions. You </h4>
            <h4> will learn indispensable test taking strategies - how to correctly
              read a question, identify the, </h4>
            <h4> understand what the question is asking
              you, and how to pick the BEST answer.</h4>
          </div>
          <div class="prac_brdr">
            <div class="prac1">
              <h1>2</h1>
              <h3>Practice Tests </h3>
            </div>
            <div class="prac1">
              <h1>1024</h1>
              <h3>Total Questions</h3>
            </div>
          </div>

          <div class="btn_set">
            <button>
              <mat-icon class="loc_opn">lock_open</mat-icon>
              Get full access now
            </button>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="mindmap-modal" *ngIf="openModel">
    <div class="midal-contain">
      <div class="modal-header">
        <h3>Instructions</h3>
        <span class="material-icons" (click)="CloseModel()"> close </span>
      </div>
      <div class="modal-body">
        <div class="points-png">
          <img src="../../../assets/InstructionsPNG.png" alt="" />
        </div>
        <div class="points">
          <ul>
            <li>
              <div>
                <label class="container">You will be given 90 minutes to complete 100 questions
                  <span class="checkmark"></span>
                </label>
              </div>
            </li>
            <li>
              <div>
                <label class="container">You must select an answer before proceeding to the next
                  question

                  <span class="checkmark"></span>
                </label>
              </div>
            </li>
            <li>
              <div>
                <label class="container">You cannot mark a question for review or return to a previous
                  question
                  <span class="checkmark"></span>
                </label>
              </div>
            </li>
            <li>
              <div>
                <label class="container">Please minimize all possible distractions while you are taking
                  the test
                  <span class="checkmark"></span>
                </label>
              </div>
            </li>
          </ul>
        </div>
       </div>
      <div class="modal-footer">
        <button (click)="StartPracticeTest()">Begin Exam</button>
      </div>
    </div>
  </div>
  <div class="reset-result" *ngIf="resetResult">
    <div class="result-body">
      <div class="containt">
        <h4>
          Are you sure you want to <span>retake</span> this
          {{ this.ResetNamedata.practice_name }}?
        </h4>
        <p>
          Resetting will allow you to take this practice test again. Your existing
          test results will still be factored into your personalized study guide.
        </p>
        <div class="reset-btns">
          <button (click)="this.resetResult = false">Cancel</button>
          <button (click)="reset()">Retake</button>
        </div>
      </div>
    </div>
  </div>

  <div class="main-empty" *ngIf="noFound">
    <div class="empty-course">
      <div class="empty-contain">
        <img src="../../../assets/knowempty.png" alt="" />
        <span>No practice exam have been assigned to you yet</span>
      </div>
    </div>
    <div class="courner-img">
      <img src="../../../assets/emptypng.png" alt="" />
    </div>
  </div>
</div>
<ngx-spinner bdColor="#00041aa6" size="default" color="##d7779b"
  template="<img src='../../../assets/images/loading.gif' class='loading-indicator'/>" [fullScreen]="true">
</ngx-spinner>

<div class="mindmap-modal" *ngIf="ViewHistory">
  <div class="midal-contain">
    <div class="modal-header">

      <div class="main-head2">
        <mat-icon>history</mat-icon>
        <h3>Previous Practice Test of <h3>{{PracticeName}}</h3>
        </h3>
      </div>
      <span class="material-icons" (click)="ViewHistory=!ViewHistory"> close </span>
    </div>
    <div class="modal-body">
      <table>
        <thead>
          <tr>
            <td>
              <h3>Date / time of assessment</h3>
            </td>
            <td>
              <h3>Score</h3>
            </td>
            <td>
              <h3>Action</h3>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of resetDatalist">
            <td>
              <h3>{{item.examdate}}, {{item.examtime}}</h3>
            </td>
            <td>
              <h2>{{item.percentage}}<span>%</span></h2>
            </td>
            <td>
              <h3><a (click)="GotoResult(item)">View results</a></h3>
            </td>
          </tr>
          <tr *ngIf="NoPrevRecordFound">
            <td>
              <p>No practice exam have been Reset to you yet</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>
<app-noconnection></app-noconnection>