<app-main-header></app-main-header>
<app-content-popup></app-content-popup>
<div class="mytraining">
    <div class="training_in">
        <div class="training_left">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                        <!-- <img class="back_icon" src="assets/img/previous.png " /> -->
                    <a class="nav-link active"  ng id="home-tab" data-toggle="tab"  (click)="backClicked()"
                        role="tab" aria-controls="home" aria-selected="true">{{topic_title.topicname}}</a>
                </li>
            </ul>
            <div class="left_card"> 
                    <div class="inner_load" *ngIf="loader">
                            <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                              <path fill="#28a8e0" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                                <animateTransform 
                                   attributeName="transform" 
                                   attributeType="XML" 
                                   type="rotate"
                                   dur="1s" 
                                   from="0 50 50"
                                   to="360 50 50" 
                                   repeatCount="indefinite" />
                            </path>
                          </svg>
                          <p>Just a moment...</p>
                        </div>

                <div class="tab-content" id="myTabContent" *ngIf="!loader">
                    <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="content_list.length>0">
                        <div class="box" *ngFor="let list of content_list;let i=index">
                            <div class="ptr" (click)="onSelect(list)">
                                    <div class="card_img">
                                        <!-- <img src="assets/img/thum.png" [ngClass]="{'grey':list.status==0,'green':list.status==1, 'orange': list.status==1}" />    -->
                                        <img src="{{list.content_files[0].thumb_fileurl}}" [ngClass]="{'grey':list.status==0,'green':list.status==2, 'orange': list.status==1}" />
                                        <div class="over_img" *ngIf="list.content_files[0].filetypeid==1"><img src="assets/img/pdf.png"/></div>
                                        <div class="over_img" *ngIf="list.content_files[0].filetypeid==2"><img src="assets/img/video.png"/></div>
                                        </div>
                                        <div class="card_cont">
                                            <h3>{{list.title}}</h3>
                                            <p>{{list.description}}</p>
                                            <div class="note">Published On: {{list.uploaddate| date: 'dd-MMM-yyy'}}</div>
                                        </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="content_list.length==0">
                        <p class="text-center">No data found</p>
                    </div>
                </div>
            </div>

        </div>

        <div class="training_right">
            <app-dashboard-dse-details  ></app-dashboard-dse-details>
        </div>
    </div>