<div *ngIf="service.status == 'ONLINE'">
  <div class="Profile-Setting">
    <div class="pc-tab">
      <input checked="checked" id="tab1" type="radio" name="pct" />
      <input id="tab2" type="radio" name="pct" />
      <section>
        <div class="tab1">
          <div class="tab-titles" *ngIf="courselist.length > 0">
            <h3>My Enrolled Courses</h3>
          </div>
          <div *ngIf="!PaymentAccess">
            <div class="select-course-main" *ngFor="let item of courselist">
              <div class="main-image">
                <img src="../../../assets/images/cybersecurity.jpg" alt="" />
              </div>
              <div class="course-detail" [ngClass]="{'Completed-off':item.percentage == 100}">
                <div class="cissp-courses">
                  <div class="courses-title">
                    <p class="cissp-box">
                      <span title="{{ item.short_name }}">{{
                        item.short_name
                        }}</span>
                    </p>
                    <p class="cohort-name">
                      {{ item.cohort_name }}<span>({{ item.short_name }})</span>
                    </p>
                  </div>
                  <div class="svgheight">
                    <svg viewBox="0 0 40 40" id="total-pros" style="width: 100% !important; height: 100% !important">
                      <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.percentage }},{{
                          100 - item.percentage
                        }}" stroke-width="3"></circle>
                    </svg>
                    <div class="centerper">
                      {{ item.percentage ? item.percentage : "0" }}%
                    </div>
                  </div>
                </div>
                <div class="date-time" *ngIf="item.certiDownloadPercentage != 100">
                  <span class="expires-title">Access Expires</span>
                  <p class="days">
                    <mat-icon>access_time</mat-icon>
                    {{item.expire_Date}} ({{ item.access_duration }} Days)
                  </p>
                  <div class="include-me">
                    <span class="toggle-title">Include me in my class leaderboard</span>
                    <div>
                      <label class="switch">
                        <input type="checkbox" (change)="changeInclude(item)" [checked]="!item.include" />
                        <span class="slider round"></span>
                      </label>
                    </div>
                  </div>
                  <div class="menu-footer">
                    <h6>Countdown to exam</h6>
                    <div class="countdown-time">
                      <img src="../../../assets/clock.svg" alt="clock" />
                      <span>{{ item.ShowTimerData }}</span>
                    </div>
                  </div>
                </div>
                <div class="enroll-footer" *ngIf="item.certiDownloadPercentage != 100">
                  <span>{{item.Access}}</span>
                  <div class="upgrade-btn">
                    <button class="dashboardBtn" (click)="viewDashboard(item)">
                      View Dashboard
                    </button>
                  </div>
                </div>
                <div class="Completed" *ngIf="item.certiDownloadPercentage == 100">
                  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M10.2 0C4.5667 0 0 4.5667 0 10.2C0 15.8333 4.5667 20.4 10.2 20.4C15.8333 20.4 20.4 15.8333 20.4 10.2C20.4 4.5667 15.8333 0 10.2 0ZM10.2 1.4C15.0601 1.4 19 5.33989 19 10.2C19 15.0601 15.0601 19 10.2 19C5.33989 19 1.4 15.0601 1.4 10.2C1.4 5.33989 5.33989 1.4 10.2 1.4ZM14.812 7.09872C14.5022 6.86744 14.0636 6.93109 13.8323 7.24088L9.50291 12.2316L7.01243 10.225L6.92567 10.1512C6.65212 9.9544 6.26851 9.979 6.02248 10.225C5.74911 10.4984 5.74911 10.9416 6.02248 11.215L9.0859 13.7942L9.16517 13.8626C9.46903 14.0877 9.90786 14.0313 10.1418 13.718L14.9541 8.07841L15.0099 7.99098C15.1718 7.69058 15.0936 7.30897 14.812 7.09872Z"
                      fill="url(#paint0_linear)" />
                    <defs>
                      <linearGradient id="paint0_linear" x1="20.4" y1="0" x2="0" y2="0" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#F473B9" />
                        <stop offset="1" stop-color="#DF166A" />
                      </linearGradient>
                    </defs>
                  </svg>
                  <p class="text">Completed</p>
                </div>
                <div class="enroll-footer" *ngIf="item.certiDownloadPercentage == 100">
                  <div class="upgrade-btn">
                    <button class="upgradeBtn" (click)="printReport(item)">
                      Completion (CPE) Certificate
                    </button>
                    <button class="dashboardBtn" (click)="gotoStudentReport(item)">
                      Course Report
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="select-course-main select-course-main_bg" *ngIf="PaymentAccess">
            <div class="main-image">
              <img src="../../../assets/images/select-course.JPG" alt="" />
            </div>
            <div class="course-detail">
              <div class="cissp-courses">
                <div class="courses-title">
                  <p class="cissp-box">
                    <span>CISSP</span>
                  </p>
                  <p class="cohort-name">FREE<span> CISSP Trial</span></p>
                </div>
              </div>
              <div class="enroll-footer">
                <span></span>
                <div class="upgrade-btn">
                  <div class="top_br">
                    <button class="lock_btn">
                      <mat-icon class="loc_opn">lock_open</mat-icon>
                      Get full access now
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
  <div class="upgradeMoadl" *ngIf="IsUpgradeModal">
    <div class="main-Modal">
      <div class="modal-header">
        <img src="../../../assets/upgrade.png" alt="" />
        <h3>Extend Membership</h3>
        <button (click)="IsUpgradeModal = !IsUpgradeModal">
          <span class="material-icons-outlined"> close </span>
        </button>
      </div>
      <div class="modal-body">
        <div class="domains">
          <div class="question-list">
            <ul>
              <li>
                <div class="domain-number">
                  <span class="titles"># Questions</span>
                </div>
                <div class="questions">
                  <span class="titles">Domain</span>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>128</span>
                </div>
                <div class="questions">
                  <p>1. Security and Risk Management</p>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>38</span>
                </div>
                <div class="questions">
                  <p>2. Asset Security</p>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>311</span>
                </div>
                <div class="questions">
                  <p>3. Security Architecture and Engineering</p>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>214</span>
                </div>
                <div class="questions">
                  <p>4. Communication and Network Security</p>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>85</span>
                </div>
                <div class="questions">
                  <p>5. Identity and Access Management (IAM)</p>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>65</span>
                </div>
                <div class="questions">
                  <p>6. Security Assessment and Testing</p>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>126</span>
                </div>
                <div class="questions">
                  <p>7. Security Operations</p>
                </div>
              </li>
              <li>
                <div class="domain-number">
                  <span>67</span>
                </div>
                <div class="questions">
                  <p>8. Software Development Security</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="prices">
          <button class="month20">$20 / Month</button>

          <button class="month50">$50 / 3 Months</button>
          <span class="month-50">3 months at $7.99 / Month. <span>Save 20%</span></span>

          <button class="month90">$90 / 6 Months</button>
          <span class="month-90">6 months at $7.50 / Month. <span>Save 25%</span></span>

          <button class="year170">$170 / Year</button>
          <span class="year-170">12 months at $6.67 / Month. <span>Save 33%</span></span>

          <div class="terms-div">
            <a (click)="RestorePurchase()">Restore Purchase</a>
            <a (click)="TermsOfService()">Terms of Service</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="mindmap-modal" *ngIf="TermsOfServicePopup">
  <div class="midal-contain">
    <div class="modal-header">
      <h3>Terms of Service</h3>
      <span class="material-icons" (click)="close()"> close </span>
    </div>
    <div class="modal-body">
      <div class="points">
        <ul>
          <li>
            <div class="MatIconView">
              <mat-icon matListIcon lass="icon">lens</mat-icon>
              <label class="container">
                That I really want to take the exam at this time and I am
                warned that
              </label>
            </div>
          </li>
          <li>
            <div class="MatIconView">
              <mat-icon matListIcon lass="icon">lens</mat-icon>
              <label class="container">Once I start the exam cannot be paused or restarted
              </label>
            </div>
          </li>
          <li>
            <div class="MatIconView">
              <mat-icon matListIcon lass="icon">lens</mat-icon>
              <label class="container">should have quite space available where I can concentrate for
                up to 3 hours
              </label>
            </div>
          </li>
          <li>
            <div class="MatIconView">
              <mat-icon matListIcon lass="icon">lens</mat-icon>
              <label class="container">
                Once I start I will have used one of my exam attempts
              </label>
            </div>
          </li>
        </ul>
      </div>
      <div class="points-png">
        <img src="../../../assets/InstructionsPNG.png" alt="" />
      </div>
    </div>
  </div>
</div>

<div class="mindmap-modal" *ngIf="RestorePurchasePopup">
  <div class="midal-contain">
    <div class="modal-header">
      <h3>Restore Purchase</h3>
      <span class="material-icons" (click)="close()"> close </span>
    </div>
    <div class="modal-body">
      <table border="1">
        <thead>
          <tr>
            <th>Srno.</th>
            <th>Purchase Details</th>
            <th>Price(USD)</th>
            <th>Date & Time</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Test1</td>
            <td>$60</td>
            <td>18-09-2021,05:55 AM</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Test2</td>
            <td>$60</td>
            <td>18-09-2021,05:55 AM</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Test3</td>
            <td>$60</td>
            <td>18-09-2021,05:55 AM</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Test4</td>
            <td>$60</td>
            <td>18-09-2021,05:55 AM</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Test5</td>
            <td>$60</td>
            <td>18-09-2021,05:55 AM</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Test6</td>
            <td>$60</td>
            <td>18-09-2021,05:55 AM</td>
          </tr>
        </tbody>
      </table>
    </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>
<app-noconnection></app-noconnection>