<div *ngIf="service.status == 'ONLINE'">
  <div class="pagemain" infinite-scroll [infiniteScrollDistance]="5" [scrollWindow]="false" [infiniteScrollThrottle]="0"
    (scrolled)="onScrollDown()">
    <div class="pre-class">
      <div class="pre-class-left">
        <h2>
          Practice Test <span>{{ name }}</span> Summary
        </h2>
      </div>
      <div class="radial-wrapper">
        <div class="circle circle-purple">
          <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]="[correctper, 100 - correctper]"></circle>
          </svg>
          <span class="material-icons purple"> done </span>
          <p>{{ correctper }}% <span style="color: #075727;">Correct</span></p>
        </div>
        <div class="circle circle-orange">
          <svg viewBox="0 0 40 40" id="incorrect">
            <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]="[incorrectper, 100 - incorrectper]"></circle>
          </svg>
          <span class="material-icons orange"> close </span>
          <p>{{ incorrectper }}% <span style="color: #FF0000;">Incorrect</span></p>
        </div>
      </div>
    </div>

    <div class="summary">
      <div class="summary-box-wrapper">
        <div class="summary-box" *ngFor="let item of DomainReport; let i = index">
          <div class="domain-box">
            <div class="md-device">
              <p><span>Material</span>{{ i + 1 }}</p>
            </div>
            <div class="sm-device">
              <p>{{ i + 1 }}<span>Material</span></p>
            </div>
          </div>
          <div class="domain-name">
            <div class="progress-box">
              <h3>{{ item.domain_name }}</h3>
            </div>
            <div class="progress-percentage">
              <div class="progress-bar">
                <div class="progress-correct" [ngStyle]="{ 'width.%': item.CorrectPer }"></div>
                <div class="progress-incorrect" [ngStyle]="{ 'width.%': item.InCorrectPer }"></div>
              </div>
              <p class="rank">{{ item.CorrectPer }} %</p>
            </div>
          </div>
        </div>
      </div>
      <div class="result-wrapper">
        <h2 class="summary-title">Test Results</h2>
        <div class="summary-next-step">
          <div class="selected">
            <span class="radio-button">
              <svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="45" cy="45" r="36" stroke="white" stroke-width="5" />
                <circle cx="45" cy="45" r="15" fill="white" />
              </svg>
            </span>
            <span>Your selected answer</span>
          </div>
          <div class="summary-button md-on-dropdown">
            <ul class="sum-btn-wrap">
              <p class="filterbyText">Filter by:</p>
              <li class="result-btn sum-btn border_w" [ngClass]="{ active: allQuestion }" (click)="filerResult('all')">
                <span class="my-3">All Questions</span>
                <span class="count-number">{{ total }}</span>
              </li>
              <li class="correct-result sum-btn border_v" [ngClass]="{ active: correctQuestion }"
                (click)="filerResult('correct')">
                <span class="count-round">
                  <span class="material-icons"> check </span>
                </span>
                <span class="my-3">Correct</span>
                <span class="count-number">{{ correct }}</span>
              </li>
              <li class="incorrect-result sum-btn border_o" [ngClass]="{ active: incorrectQuestion }"
                (click)="filerResult('incorrect')">
                <span class="count-round">
                  <span class="material-icons"> close </span>
                </span>
                <span class="my-3">Incorrect</span>
                <span class="count-number">{{ incorrect }}</span>
              </li>
              <li class="incorrect-result sum-btn" *ngIf="type == 'LINEAR'" [ngClass]="{ active: MarkQuestion }"
                (click)="filerResult('Mark')">
                <span class="my-3">Review</span>
                <span class="count-number">{{ Mark }}</span>
              </li>
              <li class="incorrect-result sum-btn" *ngIf="type == 'LINEAR'" [ngClass]="{ active: PenddingQuestion }"
                (click)="filerResult('Pending')">
                <span class="my-3">Pending</span>
                <span class="count-number">{{ pending }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="summary-button sm-on-dropdown">
          <ul class="sum-btn-wrap">
            <li class="result-btn sum-btn border_w" [ngClass]="{ active: allQuestion }" (click)="filerResult('all')">
              <span class="my-3">All Questions</span>
              <span class="count-number">{{ total }}</span>
              <div class="arrowdown-que">
                <span class="material-icons" (click)="QuestionRWQ()">
                  keyboard_arrow_down
                </span>
              </div>
            </li>
            <ul id="questionshow" class="sm-click-on">
              <li class="correct-result sum-btn border_v" [ngClass]="{ active: correctQuestion }"
                (click)="filerResult('correct')">
                <span class="count-round">
                  <span class="material-icons"> check </span>
                </span>
                <span class="my-3">Correct</span>
                <span class="count-number">{{ correct }}</span>
              </li>
              <li class="incorrect-result sum-btn border_o" [ngClass]="{ active: incorrectQuestion }"
                (click)="filerResult('incorrect')">
                <span class="count-round">
                  <span class="material-icons"> close </span>
                </span>
                <span class="my-3">Incorrect</span>
                <span class="count-number">{{ incorrect }}</span>
              </li>
              <li class="incorrect-result sum-btn" *ngIf="type == 'LINEAR'" [ngClass]="{ active: MarkQuestion }"
                (click)="filerResult('Mark')">
                <span class="my-3">Review</span>
                <span class="count-number">{{ Mark }}</span>
              </li>
              <li class="incorrect-result sum-btn" *ngIf="type == 'LINEAR'" [ngClass]="{ active: PenddingQuestion }"
                (click)="filerResult('Pending')">
                <span class="my-3">Pending</span>
                <span class="count-number">{{ pending }}</span>
              </li>
            </ul>
          </ul>
        </div>
      </div>
    </div>
    <div class="summary-result-detail" *ngIf="PracticeQuestionlist.length > 0">
      <div class="search-results">
        <div class="tabs" *ngFor="
            let items of PracticeQuestionlist;
            let i = index
          ">
          <span class="material-icons checked-icon" *ngIf="items.user_ans == items.answer && items.answered == '1'">
            check
          </span>
          <span class="material-icons checked-icon" *ngIf="items.user_ans != items.answer && items.answered == '1'">
            close
          </span>
          <div class="tab" [ngClass]="{
              'wronge-border':
                items.user_ans != items.answer && items.answered == '1',
              'correct-border':
                items.user_ans == items.answer && items.answered == '1'
            }">
            <div class="tab-title">
              <div class="accordion-content">
                <div class="que-title">
                  <h5>
                    Question <span>{{ items.sr_no }}</span>
                  </h5>
                  <p>{{ items.title }}</p>
                </div>
                <ul class="treeview">
                  <li>
                    <div class="option-flex">
                      <span class="check-round" [ngClass]="{
                          active:
                            '1' == items.answer &&
                            items.answer != items.user_ans &&
                            items.answered == '1',
                          wrong:
                            ('1' == items.answer &&
                              items.answer == items.user_ans &&
                              items.answered == '1') ||
                            ('1' != items.answer &&
                              '1' == items.user_ans &&
                              items.answered == '1')
                        }"></span>
                      <p>{{ items.first_choice }}</p>
                      <div class="hover-option-message" *ngIf="
                          '1' != items.answer &&
                          '1' == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '1' == items.answer &&
                          items.answer != items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Correct answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '1' == items.answer &&
                          items.answer == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer is correct</p>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="option-flex">
                      <span class="check-round" [ngClass]="{
                          active:
                            '2' == items.answer &&
                            items.answer != items.user_ans &&
                            items.answered == '1',
                          wrong:
                            ('2' == items.answer &&
                              items.answer == items.user_ans &&
                              items.answered == '1') ||
                            ('2' != items.answer &&
                              '2' == items.user_ans &&
                              items.answered == '1')
                        }"></span>
                      <p>{{ items.second_choice }}</p>
                      <div class="hover-option-message" *ngIf="
                          '2' != items.answer &&
                          '2' == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '2' == items.answer &&
                          items.answer != items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Correct answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '2' == items.answer &&
                          items.answer == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer is correct</p>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="option-flex">
                      <span class="check-round" [ngClass]="{
                          active:
                            '3' == items.answer &&
                            items.answer != items.user_ans &&
                            items.answered == '1',
                          wrong:
                            ('3' == items.answer &&
                              items.answer == items.user_ans &&
                              items.answered == '1') ||
                            ('3' != items.answer &&
                              '3' == items.user_ans &&
                              items.answered == '1')
                        }"></span>
                      <p>{{ items.third_choice }}</p>
                      <div class="hover-option-message" *ngIf="
                          '3' != items.answer &&
                          '3' == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '3' == items.answer &&
                          items.answer != items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Correct answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '3' == items.answer &&
                          items.answer == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer is correct</p>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="option-flex">
                      <span class="check-round" [ngClass]="{
                          active:
                            '4' == items.answer &&
                            items.answer != items.user_ans &&
                            items.answered == '1',
                          wrong:
                            ('4' == items.answer &&
                              items.answer == items.user_ans &&
                              items.answered == '1') ||
                            ('4' != items.answer &&
                              '4' == items.user_ans &&
                              items.answered == '1')
                        }"></span>
                      <p>{{ items.fourth_choice }}</p>
                      <div class="hover-option-message" *ngIf="
                          '4' != items.answer &&
                          '4' == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '4' == items.answer &&
                          items.answer != items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Correct answer</p>
                      </div>
                      <div class="hover-option-message" *ngIf="
                          '4' == items.answer &&
                          items.answer == items.user_ans &&
                          items.answered == '1'
                        ">
                        <p>Your selected answer is correct</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <input type="checkbox" id="rd{{ i + 1 }}" name="rd" (change)="checkboxchange(items)"
              [checked]="items.check" />
            <label class="tab-label" for="rd{{ i + 1 }}">
              <div class="accordion-question">
                <p>
                  {{
                  items.Topic[0]
                  ? items.Topic[0].sr_number
                  : items.SubDomains[0].domain_number
                  }}
                  :
                  {{
                  items.Topic[0]
                  ? items.Topic[0].topic_name
                  : items.SubDomains[0].subdomain_name
                  }}
                </p>
              </div>
            </label>
            <div class="tab-content">
              <div class="tab-popup-close">
                <span class="material-icons md-close-btn" (click)="TabPopUPMobile(items)">
                  close
                </span>

                <mat-tab-group class="my-tab-group">
                  <mat-tab label="Explanation">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img src="../../../assets/svg/notes.svg" alt="notes" />
                        <a>Explanation</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">Explanation</div>
                    <div [innerHTML]="items.description"></div>
                    <div class="no-written" *ngIf="
                        items.description == '' || items.description == null
                      ">
                      <p>
                        <span><svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="Login-Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <g id="Assets-New-Screens" transform="translate(-104.000000, -237.000000)" fill="#B7B8C2">
                                <g id="icon-alert" transform="translate(104.000000, 237.000000)">
                                  <path
                                    d="M6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 Z M6,1.1 C3.29380473,1.1 1.1,3.29380473 1.1,6 C1.1,8.70619527 3.29380473,10.9 6,10.9 C8.70619527,10.9 10.9,8.70619527 10.9,6 C10.9,3.29380473 8.70619527,1.1 6,1.1 Z M6,2.93081622 C6.27338095,2.93081622 6.50017619,3.13027336 6.54280143,3.39160336 L6.55,3.48081622 L6.55,5.66865795 C6.55,5.97241456 6.30375661,6.21865795 6,6.21865795 C5.72661905,6.21865795 5.49982381,6.01920081 5.45719857,5.75787081 L5.45,5.66865795 L5.45,3.48081622 C5.45,3.17705961 5.69624339,2.93081622 6,2.93081622 Z"
                                    id="Combined-Shape" fill-rule="nonzero"></path>
                                  <path
                                    d="M6,8.96240597 C6.4418278,8.96240597 6.8,8.60423377 6.8,8.16240597 C6.8,7.72057817 6.4418278,7.36240597 6,7.36240597 C5.5581722,7.36240597 5.2,7.72057817 5.2,8.16240597 C5.2,8.60423377 5.5581722,8.96240597 6,8.96240597 Z"
                                    id="Oval"></path>
                                </g>
                              </g>
                            </g>
                          </svg></span>
                        No explanation related to this topic yet. we're working
                        on it!
                      </p>
                    </div>
                  </mat-tab>
                  <mat-tab label="Notes">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img src="../../../assets/svg/notes.svg" alt="notes" />
                        <a>Notes</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">Notes</div>

                    <div class="add">
                      <textarea (focusout)="savenotes(items)" type="text" [(ngModel)]="items.Notes"
                        class="txt"></textarea>
                    </div>
                  </mat-tab>
                  <mat-tab label="Video leasson" *ngIf="items.VideoAccess == 1">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img src="../../../assets/svg/video.svg" alt="video" />
                        <a>Videos</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">Videos</div>
                    <div class="embed-video">
                      <div class="mind_mapdiv" *ngFor="let vid of items.Video">
                        <div class="video-thum" (click)="Videoclick(vid)">
                          <img [src]="vid.video_thumbnil" alt="mind-map"
                            onError="this.src='../../../assets/noimage.jpg'" />
                          <span>{{ vid.duration }}</span>
                        </div>
                        <div class="minmap_details">
                          <h2>{{ vid.video_title }}</h2>
                          <ul>
                            <li *ngFor="let topiclistdata of vid.topic_list">
                              <span>{{ topiclistdata.Text }}</span>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="no-written" *ngIf="items.Video.length <= 0">
                      <p>
                        <span><svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="Login-Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <g id="Assets-New-Screens" transform="translate(-104.000000, -237.000000)" fill="#DF166A">
                                <g id="icon-alert" transform="translate(104.000000, 237.000000)">
                                  <path
                                    d="M6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 Z M6,1.1 C3.29380473,1.1 1.1,3.29380473 1.1,6 C1.1,8.70619527 3.29380473,10.9 6,10.9 C8.70619527,10.9 10.9,8.70619527 10.9,6 C10.9,3.29380473 8.70619527,1.1 6,1.1 Z M6,2.93081622 C6.27338095,2.93081622 6.50017619,3.13027336 6.54280143,3.39160336 L6.55,3.48081622 L6.55,5.66865795 C6.55,5.97241456 6.30375661,6.21865795 6,6.21865795 C5.72661905,6.21865795 5.49982381,6.01920081 5.45719857,5.75787081 L5.45,5.66865795 L5.45,3.48081622 C5.45,3.17705961 5.69624339,2.93081622 6,2.93081622 Z"
                                    id="Combined-Shape" fill-rule="nonzero"></path>
                                  <path
                                    d="M6,8.96240597 C6.4418278,8.96240597 6.8,8.60423377 6.8,8.16240597 C6.8,7.72057817 6.4418278,7.36240597 6,7.36240597 C5.5581722,7.36240597 5.2,7.72057817 5.2,8.16240597 C5.2,8.60423377 5.5581722,8.96240597 6,8.96240597 Z"
                                    id="Oval"></path>
                                </g>
                              </g>
                            </g>
                          </svg></span>
                        No video lesson related to this question yet. we're
                        working on it!
                      </p>
                    </div>
                  </mat-tab>
                  <mat-tab label="Written study material" *ngIf="items.StudyMaterialsAccess == 1">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img src="../../../assets/svg/summary.svg" alt="summary" />
                        <a>Summary</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">Summary</div>
                    <div>
                      <div *ngFor="let itm of items.StudyMaterials" class="main-list-div ck-content">
                        <div class="list-box" class="ckmain">
                          <span class="main-title">{{ itm.title }}</span>
                          <div [innerHTML]="itm.content"></div>
                        </div>
                        <div class="clear"></div>
                      </div>

                      <div class="no-written" *ngIf="items.StudyMaterials.length <= 0">
                        <p>
                          <span><svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Login-Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Assets-New-Screens" transform="translate(-104.000000, -237.000000)"
                                  fill="#B7B8C2">
                                  <g id="icon-alert" transform="translate(104.000000, 237.000000)">
                                    <path
                                      d="M6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 Z M6,1.1 C3.29380473,1.1 1.1,3.29380473 1.1,6 C1.1,8.70619527 3.29380473,10.9 6,10.9 C8.70619527,10.9 10.9,8.70619527 10.9,6 C10.9,3.29380473 8.70619527,1.1 6,1.1 Z M6,2.93081622 C6.27338095,2.93081622 6.50017619,3.13027336 6.54280143,3.39160336 L6.55,3.48081622 L6.55,5.66865795 C6.55,5.97241456 6.30375661,6.21865795 6,6.21865795 C5.72661905,6.21865795 5.49982381,6.01920081 5.45719857,5.75787081 L5.45,5.66865795 L5.45,3.48081622 C5.45,3.17705961 5.69624339,2.93081622 6,2.93081622 Z"
                                      id="Combined-Shape" fill-rule="nonzero"></path>
                                    <path
                                      d="M6,8.96240597 C6.4418278,8.96240597 6.8,8.60423377 6.8,8.16240597 C6.8,7.72057817 6.4418278,7.36240597 6,7.36240597 C5.5581722,7.36240597 5.2,7.72057817 5.2,8.16240597 C5.2,8.60423377 5.5581722,8.96240597 6,8.96240597 Z"
                                      id="Oval"></path>
                                  </g>
                                </g>
                              </g>
                            </svg></span>
                          No Study materials related to this question yet. we're
                          working on it!
                        </p>
                      </div>
                    </div>
                  </mat-tab>

                  <!-- <mat-tab label="Flashcard" *ngIf="items.FlashcardAccess == 1">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img src="../../../assets/svg/flashcard.svg" alt="flashcard" />
                        <a>Flashcard</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">Flashcard</div>
                    <div>
                      <div *ngFor="let fls of items.Flashcards" class="main-list-div">
                        <div class="list-box">
                          <span>{{ fls.term }}</span>
                          <p>{{ fls.definition }}</p>
                        </div>
                      </div>
                      <div class="no-written" *ngIf="items.Flashcards.length <= 0">
                        <p>
                          <span><svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g id="Login-Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Assets-New-Screens" transform="translate(-104.000000, -237.000000)"
                                  fill="#B7B8C2">
                                  <g id="icon-alert" transform="translate(104.000000, 237.000000)">
                                    <path
                                      d="M6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 Z M6,1.1 C3.29380473,1.1 1.1,3.29380473 1.1,6 C1.1,8.70619527 3.29380473,10.9 6,10.9 C8.70619527,10.9 10.9,8.70619527 10.9,6 C10.9,3.29380473 8.70619527,1.1 6,1.1 Z M6,2.93081622 C6.27338095,2.93081622 6.50017619,3.13027336 6.54280143,3.39160336 L6.55,3.48081622 L6.55,5.66865795 C6.55,5.97241456 6.30375661,6.21865795 6,6.21865795 C5.72661905,6.21865795 5.49982381,6.01920081 5.45719857,5.75787081 L5.45,5.66865795 L5.45,3.48081622 C5.45,3.17705961 5.69624339,2.93081622 6,2.93081622 Z"
                                      id="Combined-Shape" fill-rule="nonzero"></path>
                                    <path
                                      d="M6,8.96240597 C6.4418278,8.96240597 6.8,8.60423377 6.8,8.16240597 C6.8,7.72057817 6.4418278,7.36240597 6,7.36240597 C5.5581722,7.36240597 5.2,7.72057817 5.2,8.16240597 C5.2,8.60423377 5.5581722,8.96240597 6,8.96240597 Z"
                                      id="Oval"></path>
                                  </g>
                                </g>
                              </g>
                            </svg></span>
                          No flashcard related to this question yet. we're
                          working on it!
                        </p>
                      </div>
                    </div>
                  </mat-tab> -->

                  <!-- <mat-tab label="Mind Map" *ngIf="items.MindMapsAccess == 1">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img src="../../../assets/svg/mind-map.svg" alt="mind-map" />
                        <a> Mind Map</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">Mind Map</div>
                    <div class="mind-map-div">
                      <div class="main-mindmap-div" *ngFor="let mind of items.MindMaps">
                        <img (click)="MindMapClick(mind)" [src]="mind.thumbnail_link" alt="mind-map"
                          onError="this.src='../../../assets/noimage.jpg'" />
                        <span>{{ mind.name }}</span>
                      </div>
                    </div>
                    <div class="no-written" *ngIf="items.MindMaps.length <= 0">
                      <p>
                        <span>
                          <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="Login-Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <g id="Assets-New-Screens" transform="translate(-104.000000, -237.000000)" fill="#B7B8C2">
                                <g id="icon-alert" transform="translate(104.000000, 237.000000)">
                                  <path
                                    d="M6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 Z M6,1.1 C3.29380473,1.1 1.1,3.29380473 1.1,6 C1.1,8.70619527 3.29380473,10.9 6,10.9 C8.70619527,10.9 10.9,8.70619527 10.9,6 C10.9,3.29380473 8.70619527,1.1 6,1.1 Z M6,2.93081622 C6.27338095,2.93081622 6.50017619,3.13027336 6.54280143,3.39160336 L6.55,3.48081622 L6.55,5.66865795 C6.55,5.97241456 6.30375661,6.21865795 6,6.21865795 C5.72661905,6.21865795 5.49982381,6.01920081 5.45719857,5.75787081 L5.45,5.66865795 L5.45,3.48081622 C5.45,3.17705961 5.69624339,2.93081622 6,2.93081622 Z"
                                    id="Combined-Shape" fill-rule="nonzero"></path>
                                  <path
                                    d="M6,8.96240597 C6.4418278,8.96240597 6.8,8.60423377 6.8,8.16240597 C6.8,7.72057817 6.4418278,7.36240597 6,7.36240597 C5.5581722,7.36240597 5.2,7.72057817 5.2,8.16240597 C5.2,8.60423377 5.5581722,8.96240597 6,8.96240597 Z"
                                    id="Oval"></path>
                                </g>
                              </g>
                            </g>
                          </svg></span>
                        No mind maps related to this question yet. we're working
                        on it!
                      </p>
                    </div>
                  </mat-tab> -->
                  <!-- <mat-tab label="References" *ngIf="items.ReferencesAccess == 1">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img src="../../../assets/svg/reference.svg" alt="reference" />
                        <a> References</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">References</div>
                    <div>
                      <div class="main-list-div">
                        <div class="refbook-div">
                          <div *ngFor="let ref of items.References">
                            <div class="ref-book" *ngIf="ref.ref_type == 'Book'">
                              <div class="ref-image">
                                <img src="{{ ref.book.book_img }}" alt="" />
                              </div>
                              <div class="ref-text">
                                <h3>{{ ref.book.book_title }}</h3>
                                <ul>
                                  <li>
                                    {{ ref.title }} ,
                                    <span>Pg. {{ ref.page_no }}</span>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="web-links" *ngIf="items.References.length > 0">
                          <ul>
                            <div *ngFor="let web of items.References">
                              <h2 *ngIf="web.ref_type == 'Website' && i == 0">
                                Website Links
                              </h2>
                              <li *ngIf="web.ref_type == 'Website'">
                                <a [href]="web.web_link" target="_blank">{{
                                  web.web_link
                                  }}</a>
                              </li>
                            </div>
                          </ul>
                        </div>

                        <div class="no-written" *ngIf="items.References.length <= 0">
                          <p>
                            <span><svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <g id="Login-Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                  <g id="Assets-New-Screens" transform="translate(-104.000000, -237.000000)"
                                    fill="#B7B8C2">
                                    <g id="icon-alert" transform="translate(104.000000, 237.000000)">
                                      <path
                                        d="M6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 Z M6,1.1 C3.29380473,1.1 1.1,3.29380473 1.1,6 C1.1,8.70619527 3.29380473,10.9 6,10.9 C8.70619527,10.9 10.9,8.70619527 10.9,6 C10.9,3.29380473 8.70619527,1.1 6,1.1 Z M6,2.93081622 C6.27338095,2.93081622 6.50017619,3.13027336 6.54280143,3.39160336 L6.55,3.48081622 L6.55,5.66865795 C6.55,5.97241456 6.30375661,6.21865795 6,6.21865795 C5.72661905,6.21865795 5.49982381,6.01920081 5.45719857,5.75787081 L5.45,5.66865795 L5.45,3.48081622 C5.45,3.17705961 5.69624339,2.93081622 6,2.93081622 Z"
                                        id="Combined-Shape" fill-rule="nonzero"></path>
                                      <path
                                        d="M6,8.96240597 C6.4418278,8.96240597 6.8,8.60423377 6.8,8.16240597 C6.8,7.72057817 6.4418278,7.36240597 6,7.36240597 C5.5581722,7.36240597 5.2,7.72057817 5.2,8.16240597 C5.2,8.60423377 5.5581722,8.96240597 6,8.96240597 Z"
                                        id="Oval"></path>
                                    </g>
                                  </g>
                                </g>
                              </svg></span>
                            No reference related to this question yet. we're
                            working on it!
                          </p>
                        </div>
                      </div>
                    </div>
                  </mat-tab> -->
                  <mat-tab label="Discussion">
                    <ng-template mat-tab-label>
                      <span class="mat-color">
                        <img class="img-icon" src="../../../assets/images/svg/discussion.svg" alt="discussion" />
                        <a>Discussion</a>
                      </span>
                    </ng-template>
                    <div class="tab-head-mobile">Discussion</div>
                    <div class="chatting-box">
                      <button (click)="gotToChat(items)">
                        Discuss this question in the Chat
                      </button>
                    </div>
                  </mat-tab>
                </mat-tab-group>
              </div>
            </div>
          </div>
        </div>
        <div class="load-more" *ngIf="PracticeQuestionlist.length < total">
          <img src='../../../assets/images/loading.gif' class='loading-indicator'/>
          <p>Loading more questions...</p>
        </div>
      </div>
    </div>
    <div class="notfound" *ngIf="PracticeQuestionlist.length <= 0 && isLoading > 0">
      <p>No questions available</p>
    </div>
  </div>
  
  <div class="mindmap-modal" *ngIf="openMindMap">
    <div class="midal-contain">
      <div class="modal-header">
        <span class="material-icons" (click)="CloseMindmap()"> close </span>
      </div>
      <div class="modal-body">
        <div [innerHTML]="Description"></div>
      </div>
    </div>
  </div>
</div>
<div class="popup-result" *ngIf="VideoPopup">
  <div class="result-body">
    <div class="videos">
      <app-videolesson [is_popup]="VideoPopup" (onComplete)="popupClose($event)"></app-videolesson>
    </div>
  </div>
</div>
<div class="popup-result" *ngIf="MindmapPopup">
  <div class="result-body">
    <div class="videos">
      <app-mindmaps [is_popup]="MindmapPopup" (onComplete)="MindmappopupClose($event)"></app-mindmaps>
    </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>