<div *ngIf="service.status == 'ONLINE'">
  <div class="main-mindmap">
    <div class="left-contain">
      <div class="sidebar-top">
        <p (click)="back()">
          <span class="material-icons">
            close
          </span> Close
        </p>
        <div class="sidebar-logo">
          <img src="../../../assets/images/sidebar-logo.png" alt="Logo" />
        </div>
      </div>
      <div class="sub-mind-maps">
        <div class="main-domain-list" *ngFor="let item of MindMaplistdata; let i = index">
          <div class="domain-id" (click)="expandDomain(i)">
            <label class="container">D{{ item.domain_number }} {{ item.domin_name }}
              <span class="checkmark" [ngClass]="{roundActive:item.DomainCheck}"></span>
            </label>
            <div class="expand-arrow" [ngClass]="{ roted: showSubdomain[i] }">
              <span class="material-icons">keyboard_arrow_right</span>
            </div>
          </div>
          <div class="main-sub-domain" *ngFor="let mind of item.MindMaps; let j = index">
            <div *ngIf="showSubdomain[i]">
              <div class="sub-domain">
                <span>{{ mind.name }}</span>
                <div class="btns">
                  <button [ngClass]="{ active: showVideos[j] }" (click)="expandVideo(mind, j)">
                    Video
                  </button>
                </div>
              </div>
              <div class="mind-tabs">
                <div class="images" *ngIf="showImages[j]">
                  <p *ngFor="let chapt of SelectedChapters" class="chapt">
                    {{ chapt.Text }}
                  </p>
                </div>
                <div class="images" *ngIf="showVideos[j]">
                  <div *ngFor="let chapt of SelectedChapters" class="main-videodiv">
                    <div class="video-titles" (click)="changeChapters(chapt)">
                      <span class="check-round" [ngClass]="{
                        roundActive: chapt.done || mind.viewed,
                        progress: chapt.progress
                      }"></span>
                      <p class="chapt">{{ chapt.Text }}</p>
                    </div>
                    <div class="video-time">
                      <span>{{ chapt.FromTime }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="popup-content mobile-popup-video" id="mobile">
      <div class="header">
        <p (click)="mobileClose()"><span class="material-icons">
            arrow_back
          </span>
          <span>Back</span>
        </p>
        <p><img src="../../../assets/images/sidebar-logo.png"></p>
      </div>
      <div class="popup-content-top" *ngIf="showVideos1" (mousemove)="resetTimer()">
        <vg-player (onPlayerReady)="onPlayerReady($event)" [ngClass]="{ 'vgControls': !showControls }">
          <vg-controls>
            <div class="forword-backword-button">
              <span class="material-icons-outlined" (click)="backwordvideo()">
                replay_10
              </span>
              <vg-play-pause></vg-play-pause>
              <span class="material-icons-outlined" (click)="forwordvideo()">
                forward_10
              </span>
            </div>
            <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
            <vg-scrub-bar readonly="disabled" disabled="disabled">
              <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
              <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
            </vg-scrub-bar>
            <vg-time-display vgProperty="left" vgFormat="mm:ss" style="justify-content: flex-end !important;
              margin-right: 15px;text-align: right;"></vg-time-display>
            <div class="settings" #videoElement>
              <div class="settings-button" [ngClass]="{'active_settings': activeSettings}" (click)="toggleSettings()">
                <span class="material-icons-outlined">settings</span>
              </div>
              <div class="settings-popup" *ngIf="showSettingsPopup">
                <div class="options" (click)="showoption('PlaybackOptions')">
                  <div class="option-name">
                    <img src="../../../assets/playback-speed-black.png" alt="playback-speed">
                    <span>Playback speed</span>
                  </div>
                  <div class="arrow">
                    <span>{{selectedPlaybackSpeed}}</span>
                    <span class="material-icons">keyboard_arrow_right</span>
                  </div>
                </div>
                <div class="options" (click)="showoption('QualityOptions')">
                  <div class="option-name">
                    <span class="material-icons-outlined"> tune </span>
                    <span>Video quality</span>
                  </div>
                  <div class="arrow">
                    <span>{{selectedVideoQuality}}</span>
                    <span class="material-icons">keyboard_arrow_right</span>
                  </div>
                </div>
              </div>
              <div class="PlaybackSettings" *ngIf="showPlaybackPopup">
                <div class="playback-speed-options">
                  <label class="back-button" (click)="backShowoption('PlaybackOptions')">
                    <span class="material-icons">keyboard_arrow_left</span>
                    <span>Playback speed</span>
                  </label>
                  <div class="playbackSpeedList">
                    <div *ngFor="let speed of playbackSpeedOptions" [ngClass]="{'activeSpeed': speed == selectedPlaybackSpeed}" (click)="setPlaybackSpeed(speed)">
                      {{ speed }}
                      <span *ngIf="speed == selectedPlaybackSpeed" class="material-icons-outlined">check</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="PlaybackSettings" *ngIf="showVideoQuality">
                <div class="playback-speed-options">
                  <label class="back-button" (click)="backShowoption('QualityOptions')">
                    <span class="material-icons">keyboard_arrow_left</span>
                    <span>Video quality</span>
                  </label>
                  <div class="playbackSpeedList">
                    <div *ngFor="let quality of videoQualityOptions" [ngClass]="{'activeSpeed': quality == selectedVideoQuality}" (click)="setVideoQuality(quality)">
                      {{ quality }}
                      <span *ngIf="quality == selectedVideoQuality" class="material-icons-outlined">check</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <vg-mute></vg-mute>
            <vg-fullscreen></vg-fullscreen>
          </vg-controls>
          <video on-ended="vidEnded()" (click)="changeplay()" [vgMedia]="media" #media id="singleVideo" preload="auto"
            autoplay>
            <!-- {{VideoLink}} -->
            <source src="{{ 'https://user.a-phy.com/backend/uploads/selfpacedvideo.mp4' }}" type="video/mp4" />
          </video>
        </vg-player>
      </div>
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <h2 class="title1">{{ VideoTitle }}</h2>
        <div class="auto-play">
          <span class="title">Auto Play</span>
          <label class="switch">
            <input type="checkbox" (change)="changeAutoPlay()" [checked]="autoPlay" />
            <span class="slider round"></span>
          </label>
        </div>
      </div>

      <div *ngIf="showImages1" class="popup-content-top MindMapdesc">
        <div [innerHTML]="MindMapdesc"></div>
      </div>
      <div class="popup-content-bottom" *ngIf="showVideos1">
        <div class="pc-tab">
          <input checked="checked" id="tab1" type="radio" name="pct" />
          <input id="tab2" type="radio" name="pct" />
          <input id="tab3" type="radio" name="pct" />
          <nav>
            <ul class="transcript-flex">
              <li class="tab1">
                <label for="tab1" class="tt">
                  <span>
                    <svg viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M4.28756 0.654858C4.28756 0.29319 3.9981 0 3.64103 0H0.646525L0.550986 0.00710034C0.239222 0.0538732 0 0.326069 0 0.654858C0 1.01653 0.289459 1.30972 0.646525 1.30972H3.64103L3.73657 1.30261C4.04833 1.25584 4.28756 0.983647 4.28756 0.654858ZM6.44173 3.85978C6.44173 3.49811 6.15227 3.20492 5.79521 3.20492H0.646525L0.550986 3.21202C0.239222 3.2588 0 3.53099 0 3.85978C0 4.22145 0.289459 4.51464 0.646525 4.51464H5.79521L5.89075 4.50754C6.20251 4.46077 6.44173 4.18857 6.44173 3.85978ZM17 13.3451C17 13.7068 16.7105 14 16.3535 14H10.0228L9.9273 13.9929C9.61554 13.9461 9.37632 13.6739 9.37632 13.3451C9.37632 12.9835 9.66578 12.6903 10.0228 12.6903H16.3535L16.449 12.6974C16.7608 12.7442 17 13.0164 17 13.3451ZM5.92951 9.62253C6.28658 9.62253 6.57604 9.91572 6.57604 10.2774C6.57604 10.6062 6.33681 10.8784 6.02505 10.9251L5.92951 10.9322H0.646525C0.289459 10.9322 0 10.6391 0 10.2774C0 9.9486 0.239222 9.6764 0.550986 9.62963L0.646525 9.62253H5.92951ZM10.7141 3.85978C10.7141 3.49811 10.4247 3.20492 10.0676 3.20492H8.94947L8.85393 3.21202C8.54216 3.2588 8.30294 3.53099 8.30294 3.85978C8.30294 4.22145 8.5924 4.51464 8.94947 4.51464H10.0676L10.1631 4.50754C10.4749 4.46077 10.7141 4.18857 10.7141 3.85978ZM7.00289 14C7.35995 14 7.64941 13.7068 7.64941 13.3451C7.64941 13.0164 7.41019 12.7442 7.09843 12.6974L7.00289 12.6903H5.88476C5.52769 12.6903 5.23823 12.9835 5.23823 13.3451C5.23823 13.6739 5.47745 13.9461 5.78922 13.9929L5.88476 14H7.00289ZM10.7141 10.2774C10.7141 9.91572 10.4247 9.62253 10.0676 9.62253H8.94947L8.85393 9.62963C8.54216 9.6764 8.30294 9.9486 8.30294 10.2774C8.30294 10.6391 8.5924 10.9322 8.94947 10.9322H10.0676L10.1631 10.9251C10.4749 10.8784 10.7141 10.6062 10.7141 10.2774ZM16.3535 3.20492C16.7105 3.20492 17 3.49811 17 3.85978C17 4.18857 16.7608 4.46077 16.449 4.50754L16.3535 4.51464H13.1401C12.783 4.51464 12.4935 4.22145 12.4935 3.85978C12.4935 3.53099 12.7327 3.2588 13.0445 3.21202L13.1401 3.20492H16.3535ZM3.45883 13.3451C3.45883 13.7068 3.16937 14 2.8123 14H0.646525L0.550986 13.9929C0.239222 13.9461 0 13.6739 0 13.3451C0 12.9835 0.289459 12.6903 0.646525 12.6903H2.8123L2.90784 12.6974C3.21961 12.7442 3.45883 13.0164 3.45883 13.3451ZM16.3535 9.62253C16.7105 9.62253 17 9.91572 17 10.2774C17 10.6062 16.7608 10.8784 16.449 10.9251L16.3535 10.9322H13.1401C12.783 10.9322 12.4935 10.6391 12.4935 10.2774C12.4935 9.9486 12.7327 9.6764 13.0445 9.62963L13.1401 9.62253H16.3535ZM16.301 0C16.658 0 16.9475 0.29319 16.9475 0.654858C16.9475 0.983647 16.7083 1.25584 16.3965 1.30261L16.301 1.30972H7.90182C7.54476 1.30972 7.2553 1.01653 7.2553 0.654858C7.2553 0.326069 7.49452 0.0538732 7.80628 0.00710034L7.90182 0H16.301ZM4.74519 7.08692C4.74519 6.72525 4.44531 6.43206 4.07539 6.43206H0.669806L0.570827 6.43916C0.247837 6.48594 0 6.75813 0 7.08692C0 7.44859 0.299883 7.74178 0.669806 7.74178H4.07539L4.17437 7.73468C4.49736 7.6879 4.74519 7.41571 4.74519 7.08692ZM8.70294 6.43206C9.07286 6.43206 9.37274 6.72525 9.37274 7.08692C9.37274 7.41571 9.12491 7.6879 8.80192 7.73468L8.70294 7.74178H7.18051C6.81058 7.74178 6.5107 7.44859 6.5107 7.08692C6.5107 6.75813 6.75854 6.48594 7.08153 6.43916L7.18051 6.43206H8.70294ZM16.9172 7.08692C16.9172 6.72525 16.6174 6.43206 16.2474 6.43206H11.851L11.752 6.43916C11.4291 6.48594 11.1812 6.75813 11.1812 7.08692C11.1812 7.44859 11.4811 7.74178 11.851 7.74178H16.2474L16.3464 7.73468C16.6694 7.6879 16.9172 7.41571 16.9172 7.08692Z" />
                    </svg>
                  </span>
                  <span>Transcripts</span>
                </label>
              </li>
              <li class="tab3">
                <label for="tab3" class="tt">
                  <span>
                    <svg viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M13.4262 0H2.60656C1.167 0 0 1.16891 0 2.61084V14.4335C0 15.8754 1.167 17.0443 2.60656 17.0443H12.4426C13.8822 17.0443 15.0492 15.8754 15.0492 14.4335V1.62562C15.0492 0.727813 14.3226 0 13.4262 0ZM2.60656 1.28079H13.4262C13.6164 1.28079 13.7705 1.43517 13.7705 1.62562V14.4335C13.7705 15.1681 13.176 15.7635 12.4426 15.7635H2.60656C1.8732 15.7635 1.27869 15.1681 1.27869 14.4335V2.61084C1.27869 1.87627 1.8732 1.28079 2.60656 1.28079ZM11.9271 8.36453C11.9271 8.01085 11.6508 7.72414 11.31 7.72414H3.69179L3.60059 7.73108C3.30301 7.77682 3.07467 8.043 3.07467 8.36453C3.07467 8.71821 3.35096 9.00493 3.69179 9.00493H11.31L11.4012 8.99798C11.6988 8.95224 11.9271 8.68606 11.9271 8.36453ZM11.31 4.28571C11.6508 4.28571 11.9271 4.57243 11.9271 4.92611C11.9271 5.24764 11.6988 5.51382 11.4012 5.55956L11.31 5.5665H3.69179C3.35096 5.5665 3.07467 5.27979 3.07467 4.92611C3.07467 4.60458 3.30301 4.3384 3.60059 4.29266L3.69179 4.28571H11.31ZM8.31148 12.1167C8.31148 11.7631 8.02523 11.4763 7.67213 11.4763H3.71401L3.61953 11.4833C3.31123 11.529 3.07467 11.7952 3.07467 12.1167C3.07467 12.4704 3.36091 12.7571 3.71401 12.7571H7.67213L7.76661 12.7502C8.07491 12.7045 8.31147 12.4383 8.31148 12.1167Z" />
                    </svg>

                  </span>
                  <span>Notes</span>
                </label>
              </li>
            </ul>
          </nav>
          <section>
            <div class="tab1">
              <p>
                <span *ngFor="let item of TranscriptData" (click)="transcriptClick(item)" class="transcript"
                  data-ga-action="click" id="{{ item.FromTime }}">
                  {{ item.Text }}
                </span>
              </p>
              <div class="nodata-center" *ngIf="TranscriptData.length == 0">
                <span>No Transcript Available</span>
              </div>
            </div>
            <div class="tab2">
              <ng-template mat-tab-label>
                <span class="mat-color">
                  <img src="../../../assets/svg/discussion.svg" alt="discussion" />
                  Discussion
                </span>
              </ng-template>
              <div class="chatting-box">
                <div *ngFor="let disc of Discussion">
                  <div class="user-1" *ngIf="userid != disc.user.id">
                    <div class="chat-box">
                      <img src="{{ disc.user.avatar_url }}" alt="user" onError="this.src='assets/user.png'" />
                      <div class="msg">
                        <span class="user-names">{{
                          disc.user.name ? disc.user.name : disc.user.email
                          }}
                          <span>Jun 12, 6:25 PM</span></span>
                        <span>{{ disc.message }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="user-2" *ngIf="userid == disc.user.id">
                    <div class="chat-box">
                      <div class="msg">
                        <span class="user-names">Me <span>Jun 12, 6:25 PM</span></span>
                        <span>{{ disc.message }}</span>
                      </div>
                      <img src="{{ disc.user.avatar_url }}" alt="user" onError="this.src='assets/user.png'" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="footer-div">
                <input type="text" placeholder="Start Typing..." [(ngModel)]="DiscussionText" />
                <button (click)="saveDiscussion()">Send</button>
              </div>
              <div class="nodata-center" *ngIf="Discussion.length == 0">
                <span>No Discussion Available</span>
              </div>
            </div>
            <div class="tab3">
              <div>
                <div class="add">
                  <textarea type="text" class="txt" [(ngModel)]="txtVideoNotes"
                    (focusout)="onFocusOutEvent($event)"></textarea>
                </div>
              </div>
              <div class="nodata-center" *ngIf="!VideoNotes || VideoNotes.length <= 0">
                <span>No data available for notes</span>
              </div>
            </div>
          </section>
        </div>
      </div>
      <div class="mindmapss tab-content" *ngIf="showImages1">
        <h4 class="chain-study">Chain of Study</h4>
        <mat-tab-group class="my-tab-group">
          <mat-tab label="Video leasson">
            <ng-template mat-tab-label>
              <div>
                <img class="img-icon" src="../../../assets/images/svg/video.svg" alt="video" />
              </div>
              <span class="mat-color"> Video Leasson </span>
            </ng-template>
            <div class="embed-video">
              <div class="mind_mapdiv" *ngFor="let vid of 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 videotopic_list of vid.topic_list"><span>{{videotopic_list.Text}}</span></li>

                  </ul>
                </div>
              </div>
              <div class="nodata-center" *ngIf="Video.length <= 0">
                No video lesson related to this topic yet. we're working on it!
              </div>
            </div>
          </mat-tab>
          <mat-tab label="Written study material">
            <ng-template mat-tab-label>
              <div>
                <img class="img-icon" src="../../../assets/images/svg/summary.svg" alt="summary" />
              </div>
              <span class="mat-color"> Summary </span>
            </ng-template>
            <div>
              <div class="main-list-div">
                <div class="list-box" *ngFor="let summ of StudyMaterials">
                  <span>{{ summ.title }}</span>
                  <p [innerHTML]="summ.content"></p>
                </div>
              </div>
              <div class="nodata-center" *ngIf="StudyMaterials.length <= 0">
                <p>No data available for study materials</p>
              </div>
            </div>
          </mat-tab>

          <mat-tab label="Flashcard">
            <ng-template mat-tab-label>
              <div>
                <img class="img-icon" src="../../../assets/images/svg/flashcard.svg" alt="flashcard" />
              </div>
              <span class="mat-color"> Flashcard </span>
            </ng-template>
            <div>
              <div class="main-list-div" *ngIf="Flashcards.length > 0">
                <div class="list-box" *ngFor="let flash of Flashcards">
                  <span>{{ flash.term }}</span>
                  <p>{{ flash.definition }}</p>
                </div>
              </div>
              <div class="nodata-center" *ngIf="Flashcards.length <= 0">
                <p>
                  No flashcard related to this topic yet. we're working on it!
                </p>
              </div>
            </div>
          </mat-tab>

          <mat-tab label="References">
            <ng-template mat-tab-label>
              <div>
                <img class="img-icon" src="../../../assets/images/svg/reference.svg" alt="reference" />
              </div>
              <span class="mat-color"> References </span>
            </ng-template>
            <div>
              <div class="main-list-div">
                <div class="refbook-div">
                  <div *ngFor="let ref of References" class="ref-book">
                    <h3>{{ ref.title }}</h3>
                    <ul>
                      <li *ngIf="ref.ref_type == 'Book'">
                        {{ ref.book.book_title }},
                        <span>Pg. {{ ref.page_no }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
                <h2 *ngIf="References.length > 0">Website Links</h2>
                <div class="web-links" *ngFor="let web of References">
                  <ul *ngIf="web.web_link">
                    <li>{{ web.web_link }}</li>
                  </ul>
                </div>
                <div class="nodata-center" *ngIf="References.length <= 0">
                  No reference related to this topic yet. we're working on it!
                </div>
              </div>
            </div>
          </mat-tab>
        </mat-tab-group>
      </div>
    </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>