<app-main-header></app-main-header>
<app-status-popup></app-status-popup>
<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 ptr" [(ngModel)]="rolewise" (ngModelChange)='changeRoleSales($event)'>
            <option value="" disabled>Select Dealer</option>
            <option  *ngFor="let dealer of dealerlist" value="{{dealer.dealer_code}}">{{dealer.dealer_name}}</option>
          </select>
        </div> -->
        <div class="input-group mb-3" style="width:196px;" *ngIf="user_role==7 && dealerlist.length!=0">
          <div class="input-group-prepend dealer_drop">
            <h6> Dealer:</h6>
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false" style="width:auto;padding: 8px 20px 10px 10px">
              <p>{{selected_title_dealer}}</p>
            </button>
            <div class="dropdown-menu" *ngIf="dealerlist.length>1">
              <div class="drop-inn">
                  <a class="dropdown-item" *ngFor="let list of dealerlist;let i=index;">
                      <img src="assets/img/checked.png" *ngIf="list.is_selected==1" />
                      <p (click)="radioSelectDealer(i)">{{list.dealer_name}}</p>
                    </a>
              </div>
            </div>
          </div>
        </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 *ngIf="dselist.length>0">

            <div class="card box" *ngFor="let list of dselist">
              <div class="list_div">
                <div class="card_img">
                  <img src="https://hyper-m.cygnusa.in/images/no_user.png" />
                </div>
                <div class="card_cont">
                  <h6>{{list.fname}}</h6>
                  <p>{{list.smpin}} - {{list.dealer_name}}</p>
                </div>
                <div class="trophy border">
                  <div class="trof">
                      <div class="count" *ngIf="list.status == 1" (click)="changestatus(1,list)">Active</div>
                      <div class="count" *ngIf="list.status == 2" (click)="changestatus(2,list)">InActive</div>
                  </div>
                </div>
              </div>
            </div>
            </div>
            <div *ngIf="dselist.length==0">
              <p style="text-align: center;">No user List</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="training_right" *ngIf="user_role!=15">
      <app-dashboard-dse-details  ></app-dashboard-dse-details>
    </div>
  </div>
