<app-main-header></app-main-header>
<app-toaster-container></app-toaster-container>
<div class="mytraining">
  <div class="training_in">
    <div class="training_left" [style.width.%]="!show_dashboard_dse ?'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>
      <button class="btn primary fixed color add_trainer" *ngIf="!loader && isaccount_broadcast" (click)="addtraining()">Create New</button>
        <div class="tab-content" id="myTabContent" *ngIf="!loader">
          <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="bullet_in.length>0">  
            <div class="list" *ngFor="let list of bullet_in| paginate: { itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item }; let i=index;">
              <div class="left_list">
                <h4 class="head">{{list.title}}</h4>
                <p class="desc">{{list.description}}</p>
                <p class="pres">Presenter: {{list.organiser_name}}</p>
                <!-- <div class="team" *ngIf="isaccount_broadcast"><img src="assets/img/team.png" (click)="onpopup(list,i)"></div> -->
              </div>
              <div class="right_list">
                <div class="close" *ngIf="(list.btnstatus && list.broadcaster && list.cmd == 'Yet to be Start')" (click)="deleteRow(list.id)">x</div>
                <div class="publish">
                  <p> 
                    <span class="day">{{list.fromdate | date: 'dd'}}</span> <br>
                    <span class="month">{{list.fromdate | date: 'MMM'}}</span><br>
                    <span class="time">{{list.fromdate | date:'shortTime'}} - {{list.todate | date:'shortTime'}}</span></p>
                </div>
                <!-- <div class="btn_join">
                  <p class="join_enable newenable" *ngIf="(list.btnstatus && list.cmd == 'Yet to be Start')">{{list.cmd}}</p>
                  <p class="join_enable" *ngIf="(list.btnstatus && list.cmd == 'Join')" (click)="onSelect(list)">{{list.cmd}}</p>
                  <p  class="join_disable" *ngIf="!list.btnstatus">{{list.cmd}}</p>
                </div> -->
              </div>
            </div>
          </div> 
          <div class="tab-pane fade show active" id="0" role="tabpanel" aria-labelledby="home-tab" *ngIf="bullet_in.length==0">  
            <p style="margin:0 auto;text-align: center;vertical-align:middle;font-weight:bold">No data found</p>
          </div>
        </div> 
        <pagination-controls *ngIf="!loader && bullet_in.length!=0" class="pagination pac_pagenation" style="margin-top: 0;float: right;" (pageChange)="page = getServerData($event)" ></pagination-controls>
      </div>
    </div>
    </div>
  </div>