<app-main-header></app-main-header>
<div class="mytraining">
  <div class="training_in">
    <div class="training_left" [style.width.%]="user_role==15?'100':'calc(100% - 380px)'">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" *ngFor="let list of leader_type;let i=index">
          <a class="nav-link" [ngClass]="{'active': i==0}" ng id="home-tab" data-toggle="tab" href="#{{i}}" (click)="selectTopic(list.id)"
            role="tab" aria-controls="home" aria-selected="true">{{list.title}}</a>
        </li>
        <div class="box_right"  >
          <img src="assets/img/arrow_blue_left.png " (click)="decreasFilter()" />
          <p>{{filter_date}}</p>
          <img *ngIf="filter_date==date_now" class="disable_img"  [ngClass]="filter_date!=date_now?'':'disable_arrow'" src="assets/img/arrow_blue_right.png" />
          <img *ngIf="filter_date!=date_now" src="assets/img/arrow_blue_right.png" (click)="increasFilter()" />
        </div>
        <div class="box_right" *ngIf="!is_filter">
          <select class="form-control" [(ngModel)]="rolewise" (ngModelChange)='changeRole($event)'>
              <option  value="area" selected>Area</option>
              <option  value="region">Region</option>
              <option  value="zone">Zone</option>
               <option  value="panindia"  >National</option>
            </select>
        </div>
        <div class="box_right" *ngIf="is_filter">
            <select class="form-control ptr" [(ngModel)]="rolewise" (ngModelChange)='changeRoleSales($event)'>
                <option  value="area" selected>Area</option>
                <option  value="region">Region</option>
                <option  value="zone">Zone</option>
                 <option  value="panindia"  >National</option>
              </select>
          </div>
      </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">
            <div class="row title">
              <div class="col-sm-6">YOUR POSITION</div>
              <div class="col-sm-6 text-right">{{user_data.rank}} OUT OF {{total_count}}</div>
            </div>
            <div class="card box border">
              <div (click)="onSelect(list)" class="list_div">
                <div class="card_img">
                  <!-- <img src="{{user_data.profile_photo}}" /> -->
                  <img src="assets/img/user_vc.png" />
                </div>
                <div class="card_cont">
                  <h6>{{user_data.fname}}</h6>
                  <p>{{user_data.dealer.dealer_code}} - {{user_data.dealer.dealer_name}}, {{user_data.dealer.city}}</p>
                </div>
                <div class="card_duration" *ngIf="!is_filter&&user_data.total_time!=undefined">
                  <p>Time Duration: {{formatMin(user_data.total_time)}}</p>
                  <!-- <p>Completed on: {{user_data.last_time | date: 'dd-MMM-yyy'}} </p> -->
                </div>
                <div class="trophy border">
                  <div class="trof">
                    <img src="assets/img/trophy.png">
                    <div class="count">{{user_data.rank}}</div>
                  </div>
                  <p>{{user_data.percentage}}<span *ngIf="user_data.percentage!='-'">%</span></p>
                </div>
              </div>
            </div>
            <div *ngIf="leader_deatail.length>0">
            <div class="row title">
              <div class="col-sm-6">TOP 20</div>
              <div class="col-sm-6 text-right">OUT OF 20</div>
            </div>

            <div class="card box" *ngFor="let list of leader_deatail">
              <div (click)="onSelect(list)" class="list_div">
                <div class="card_img">
                  <img src="{{list.user.profile_photo}}" />
                </div>
                <div class="card_cont">
                  <h6>{{list.user.fname}}</h6>
                  <p>{{list.user.dealer.dealer_code}} - {{list.user.dealer.dealer_name}}, {{list.user.dealer.city}}</p>
                </div>
                <div class="card_duration" *ngIf="!is_filter">
                  <p>Time Duration:{{formatMin(list.total_time)}}</p>
                  <p>Completed on: {{list.last_time | date: 'dd-MMM-yyy'}} </p>
                </div>
                <div class="trophy border">
                  <div class="trof">
                    <img src="assets/img/trophy.png">
                    <div class="count">{{list.rank}}</div>
                  </div>
                  <p>{{list.percentage}}<span *ngIf="list.percentage!='-'">%</span></p>
                </div>
              </div>
            </div>
            </div>
            <div *ngIf="leader_deatail==0">
              <!-- <p class="text-center">No data found</p> -->
            </div>
          </div>
          <div class="tab-pane fade show" id="1" role="tabpanel" aria-labelledby="home-tab">
            <!-- <div class="row title">
              <div class="col-sm-6">YOUR POSIcdTION</div>
              <div class="col-sm-6 text-right">OUT OF 200</div>
            </div>
            <div class="card box border">
              <div (click)="onSelect(list)" class="list_div">
                <div class="card_img">
                  <img src="{{user_data.profile_photo}}" />
                </div>
                <div class="card_cont">
                  <h6>{{user_data.fname}}</h6>
                  <p>{{user_data.country}}</p>
                </div>
                <div class="trophy">
                  <div class="trof">
                    <img src="assets/img/trophy.png">
                    <div class="count">{{user_data.rank}}</div>
                  </div>
                  <p>{{user_data.percentagse}}/100</p>
                </div>
              </div>
            </div>
            <div class="row title">
              <div class="col-sm-6">TOP 20</div>
              <div class="col-sm-6 text-right">OUT OF 20</div>
            </div>
            <div class="card box" *ngFor="let list of leader_deatail">
              <div (click)="onSelect(list)" class="list_div">
                <div class="card_img">
                  <img src="{{list.user.profile_photo}}" />
                </div>
                <div class="card_cont">
                  <h6>{{list.user.fname}}</h6>
                  <p>{{list.user.country}}</p>
                </div>
                <div class="trophy">
                  <div class="trof">
                    <img src="assets/img/trophy.png">
                    <div class="count">{{list.rank}}</div>
                  </div>
                  <p>{{list.percentage}}/100</p>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="training_right" *ngIf="user_role!=15">
      <app-dashboard-dse-details  ></app-dashboard-dse-details>
    </div>
  </div>
