<app-main-header></app-main-header>
<div class="mytraining">
  <div class="training_in">

    <ul class="nav nav-tabs" id="myTab" role="tablist" style="display: none;">
      <!-- <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#trainig-tab" role="tab" aria-controls="home" aria-selected="true">Traning Feedback</a>
      </li> -->
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#feedbacks-tab" role="tab" aria-controls="profile" aria-selected="false">Feedback</a>
      </li>
    </ul>

    <div class="tab-content" id="feedback-tab">

      <div class="tab-pane fade" id="trainig-tab" role="tabpanel" aria-labelledby="home-tab">
        <div class="training_left" [style.width.%]="user_role==15?'100':'calc(100% - 380px)'"> 
          <div class="left_card">
            <div class="table_training table-responsive scroll_x">
              <table class="table table-fixed">
                <thead>
                  <tr>
                      <th>Training Title</th>
                      <th>Training Dates</th>
                      <th>Venue</th>
                      <th>Training Feedback</th>
                      <th>Trainer Feedback</th>
                      <th>Overall Feedback </th>
                      <th>Enter Feedback</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Silver</td>
                    <td>02 Aug 2020 - 04 Aug 2020</td>
                    <td>Lorem Ipsum is simply dummy text</td>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                    <td><a class="btn primary" [routerLink]="['/trainingfeedback/31']">View Feedback</a></td>
                  </tr>
                  <tr>
                    <td>Bronze</td>
                    <td>02 Aug 2020 - 04 Aug 2020</td>
                    <td>Lorem Ipsum is simply dummy text</td>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                    <td><a class="btn primary" [routerLink]="['/trainingfeedback/31']">View Feedback</a></td>
                  </tr>
                  <tr>
                    <td>Base</td>
                    <td>02 Aug 2020 - 04 Aug 2020</td>
                    <td>Lorem Ipsum is simply dummy text</td>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                    <td>4.5/5</td>
                    <td><a class="btn primary" [routerLink]="['/trainingfeedback/20']">View Feedback</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-pane fade show active" id="feedbacks-tab" role="tabpanel" aria-labelledby="profile-tab">

        <div class="training_left" [style.width.%]="user_role==15?'100':'calc(100% - 380px)'"> 
          <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="survey_list.length>0">
                <div class="box" *ngFor="let list of survey_list;let i=index">
                  <div (click)="onSelect(list,i)" class="ptr list_div">
                    <div class="card_img">
                      <div class="over_img"> 
                         <img src="assets/img/feedback.png" />
                      </div>  
                    </div>
                    <div class="card_cont">
                      <h3>Feedback {{i+1}}</h3>
                      <p>{{list.assessmentname}}</p>
                      <div class="note">
                        Published On: {{list.publisheddate_str | date: 'dd-MMM-yyy'}}
                        <p *ngIf="list.status==7" class="text_grey">{{list.statusname}}</p>
                        <p *ngIf="list.status==8" class="text_red">{{list.statusname}}</p>
                        <p *ngIf="list.status==3" class="text_green">{{list.statusname}}</p>
                       </div>
                    </div>
                  </div>
                </div> 
              
              </div>
              <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="survey_list.length==0">
                <p class="text-center">No data found</p>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>



    <div class="training_right" *ngIf="user_role!=15">
      <app-dashboard-dse-details  ></app-dashboard-dse-details>
    </div>
  </div>
</div>