<div *ngIf="service.status == 'ONLINE'">
  <div class="main-list-div">
    <div class="list-box">
      <div class="search-showname">
        <p>
          Showing result for <span>{{ this.Search }}</span>
        </p>
      </div>

      <div class="flash">
        <div class="head">
          <p><span class="material-icons"> wysiwyg </span> PDF</p>
        </div>
        <div class="detail">
          <div *ngFor="let item of FlashCardFilter">
            <ul>
              <li class="title" (click)="onPdfPptopen('https://user.a-phy.com/backend/uploads/'+item.PdfName, item, 'PPT')">{{ item.PdfTitle }}</li>
            </ul>
            <!-- <p class="title">{{ item.PdfTitle }}</p> -->
            <!-- <p class="desc">{{ item.definition }}</p> -->
          </div>
          <div *ngIf="FlashCardFilter.length <= 0">
            <!-- <p>No Flashcard Found</p> -->
            <p>No PDF File Found</p>
          </div>
        </div>
      </div>
      <div class="flash">
        <div class="head">
          <p><span class="material-icons"> tour </span> Excel</p>
        </div>
        <div class="detail">
          <!-- <div class="mind">
            <div class="imgs" *ngFor="let item of MindMapsFilter; let i = index">
              <img src="{{ item.thumbnail_link }}" (click)="MindMapClick(item)" />
              <div class="img-detail">
                <span>{{ i + 1 }} .</span>
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div> -->
          <div *ngFor="let item of MindMapsFilter">
            <ul>
              <li class="title" (click)="onExcelOpen('https://user.a-phy.com/backend/uploads/'+item.ExcelName, item )">{{ item.ExcelTitle }}</li>
            </ul>
          </div>
          <div *ngIf="MindMapsFilter.length <= 0">
            <!-- <p>No Mind Maps Found</p> -->
            <p>No Excel File Found</p>
          </div>
        </div>
      </div>
      <div class="flash">
        <div class="head">
          <p>
            <span class="material-icons"> import_contacts </span> PPT
          </p>
        </div>
        <div class="detail">
          <div *ngFor="let item of PptFilter">
            <ul>
              <li class="title" (click)="onPdfPptopen('https://user.a-phy.com/backend/uploads/'+item.PptName, item, 'PDF')">{{ item.PptTitle }}</li>
            </ul>
          </div>
          <div *ngIf="PptFilter.length <= 0">
            <p>No PPT Found</p>
          </div>
        </div>
      </div>
      <!-- <div class="flash">
        <div class="head">
          <p>
            <span class="material-icons"> import_contacts </span> PPT
          </p>
        </div>
        <div class="detail">
          <div *ngFor="let item of Studymaterial">
            <p [innerHTML]="item.content"></p>
            <hr />
          </div>
          <div *ngIf="Studymaterial.length <= 0">
            <p>No PPT Found</p>
          </div>
        </div>
      </div> -->
      <div class="flash">
        <div class="head">
          <p>
            <span class="material-icons"> play_circle_filled </span> Video
          </p>
        </div>
        <div class="detail">
          <div class="mind" *ngIf="VideosFilter && VideosFilter.length > 0">
            <div class="imgs" *ngFor="let item of VideosFilter; let i = index">
              <img src="{{ item.video_thumbnil }}" (click)="Videoclick(item)" />
              <div class="img-detail">
                <span>{{ i + 1 }}.</span>
                <p>{{ item.video_title }}</p>
              </div>
            </div>
          </div>
          <div *ngIf="VideosFilter.length <= 0">
            <p>No Video Found</p>
          </div>
        </div>
      </div>
      <div class="flash">
        <div class="head">
          <p><span class="material-icons"> textsms </span> JPG/JPEG/PNG</p>
        </div>
        <div class="detail">
          <!-- <p class="title" *ngFor="let item of PracticeFilter; let i = index">
            {{ item.title }}
          </p> -->
          <div *ngFor="let item of PracticeFilter">
            <ul>
              <li class="title" (click)="onImgOpen('https://user.a-phy.com/backend/uploads/'+item.ImgName, item)">{{ item.ImgTitle }}</li>
            </ul>
          </div>
          <div *ngIf="PracticeFilter.length <= 0">
            <!-- <p>No Practice Question Found</p> -->
            <p>No JPG/JPEG/PNG Found</p>
          </div>
        </div>
      </div>
    </div>
    <!-- popup -->
    <div class="popup" *ngIf="showPdfPpt">
      <div class="popup-content">
          <span class="material-icons closeButton" (click)="showPdfPpt=false"> close </span>
          <ngx-doc-viewer [url]="PdfPptset" style="width:100%;height:85vh;" (loaded)="onDocumentLoaded()"></ngx-doc-viewer>
      </div>
    </div>
    <div class="popup" *ngIf="showXls">
      <div class="popup-content">
          <span class="material-icons closeButton" (click)="showXls=false"> close </span>
          <ngx-doc-viewer *ngIf="showXls" [url]="[Xlsset]" style="width:100%;height:85vh;" (loaded)="onDocumentLoaded()"></ngx-doc-viewer>
      </div>
    </div>
    
    <div class="popup" *ngIf="showImg">
      <div class="popup-content">
          <span class="material-icons closeButton" (click)="showImg=false"> close </span>
          <ngx-image-viewer [src]="[Imgset]" style="width:100%;height:65vh;"></ngx-image-viewer>
      </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>