<app-main-header></app-main-header>
<div class="myassessment">
    <div class="training_in">
        <div class="training_left">
            <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">
                        <div class="box assessment_box" *ngFor="let list of assessement_list;let i=index">
                            <div (click)="onSelect(list)" class="ptr">
                                <div class="card_img" *ngIf="list.atype==0">
                                    <div class="over_img"><img src="assets/img/Learning.png"/></div>
                                   <p class="text-center">Learning</p>
                                </div>
                                <div class="card_img"  *ngIf="list.atype==1">
                                    <div class="over_img"><img src="assets/img/Certification.png"/></div>
                                   <p class="text-center">Certification</p>
                                </div>
                                <div class="card_cont">
                                    <h3>{{list.assessmentname}}</h3> 
                                    <div class="note">Published On: {{list.publisheddate | date: 'dd-MMM-yyy'}}</div>
                                </div>
                                <div class="card_icon">
                                    <img *ngIf="list.status!=7 && list.status!=8" src="assets/img/circle-yes.png"/>
                                    <img *ngIf="list.status==7" src="assets/img/circle-no.png"/>
                                    <img *ngIf="list.status==8" src="assets/img/circle-red.png"/>
                                    <div *ngIf="list.completed_time!=undefined&&list.status!=7 && list.status!=8" class="note">Completed on: {{list.completed_time | date: 'dd-MMM-yyy'}}</div>
                                    <div class="note">{{list.statusname}}</div>
                                    <!-- <div *ngIf="list.status==8" class="note">Expired</div> -->
                                </div> 
                                <div class="score_box"  [ngClass]="list.highscore==0&&list.attempt_time==0?'grey':list.highscore>=80?'green':'red'">
                                    <h6>score</h6>
                                    <p>{{list.highscore}}</p>   
                                    <p>100</p>
                                </div>
                            </div>
                        </div> 
                        <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="assessement_list.length==0">  
                            <p style="margin:0 auto;text-align: center;vertical-align:middle;font-weight:bold">No data found</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>