<div class="limiter">
  <app-all-menus></app-all-menus>
  <div id="dvTable" style="position: absolute;top:200px"></div>
  <div id="toast">
   <div id="desc">{{data_descip}}</div>
 </div>
   <div class="container-table100">
     <div class="wrap-table100">
       <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
         <div class="col-6">
           <i class="fas fa-plus-circle" (click)="addSubadmin()" mdTooltip="{{'Add Subadmin' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
           <h4 style="display: inline-block;float: right;">{{'Subadmin' | translate}}</h4>
               <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
         </div>
         <div class="col-6">
           <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">{{'Next' | translate}} >></button>
           <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< {{'Previous' | translate}}</button>
           <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;margin-right: 5px;" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Subadmin Search' | translate}}" />
         </div> 
       </div>
       <div class="table100 ver1" id="deviceTable">
         <div class="table100-firstcol">       
           <table>
             <thead>
               <tr>  
                   <th class="cell100 column1" style="font-weight:600;background: #ADD8E6;">
                     <div class="row">
                       <div class="col-5">
                         <p>{{'NAME' | translate}}</p>
                       </div>
                       <div class="col-5">
                         <p>{{'EMAIL' | translate}}</p>
                       </div>
                       <div class="col-2">
                         <p>{{'PHONE' | translate}}</p>
                       </div>          
                     </div>
                   </th>
                
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let dealer of subadmin_info">          
                   <td class="cell100 column1" (click)="dealerSwitch(dealer)">
                     <div class="row">
                       <div class="col-sm-5">
                         <p>{{dealer.first_name}} {{dealer.last_name}}</p>
                       </div>
                       <div class="col-sm-5">
                         <p (click)="dealerSwitch(dealer)">{{dealer.email}}</p>
                       </div>
                       <div class="col-sm-2">
                         <p (click)="dealerSwitch(dealer)">{{dealerPhone(dealer)}}</p>
                       </div>
                     </div>              
                   </td>
               
               </tr>
             </tbody>
           </table>
         </div>
         <div class="wrap-table100-nextcols js-pscroll" style="height: 660px;">
           <div class="table100-nextcols">
             <table>
               <thead>
                 <tr class="row100 head">    
             
                   <th class="cell100 column2" style='text-align: left;font-weight: 600;background: #ADD8E6;padding-left: 55px;'>{{'USER ID' | translate}}</th>
                   <th class="cell100 column3" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'PASSWORD' | translate}}</th>
                    <th class="cell100 column3" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'ROLE' | translate}}</th>
                   <th class="cell100 column4" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'CREATED ON' | translate}}</th>
                   <th class="cell100 column5" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'EXPIRES ON' | translate}}</th>
                   <th class="cell100 column6" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST ACTIVITY' | translate}}</th>
                   <th class="cell100 column7" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST LOGIN' | translate}}</th>
                   <th class="cell100 column8" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LOGIN TYPE' | translate}}</th>
                   <th class="cell100 column9" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'TOTAL VEHICLES' | translate}}</th>
                   <th class="cell100 column10" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'DELETED VEHICLES' | translate}}</th>
                   <!-- <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'ALLOCATED POINTS' | translate}}</th> -->
                   <!-- <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'AVAILABLE POINTS'| translate}}</th> -->
                   <th class="cell100 column12" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'TOKEN' | translate}}</th>
                   <!-- <th class="cell100 column13" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DOCUMENTS' | translate}}</th>   -->
                   <th class="cell100 column14" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'EDIT' | translate}}</th>
                   <th class="cell100 column15" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DELETE' |translate}}</th>
                   <!-- <th class="cell100 column16" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER STATUS' | translate}}</th> -->
                   <!-- <th class="cell100 column17" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER PERMISSION' | translate}}</th> -->
                   <!-- <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'ADD POINTS' | translate}}</th>   -->
                   <!-- <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'SUSPEND ACCOUNT' | translate}}</th>            -->
                 </tr>
               </thead>
               <tbody>
                 <tr class="row100 body" *ngFor="let dealer of subadmin_info">
      
                   <td class="cell100 column2"  style="cursor: pointer;" >{{dealer.user_id?dealer.user_id:'NA'}}</td>
                   <td class="cell100 column3" style="cursor: pointer;" >{{dealer.pass?dealer.pass:'Not saved'}}</td>
                  <td class="cell100 column3" style="cursor: pointer;" >{{dealer.customer_role?dealer.customer_role:''}}</td>
                   <td class="cell100 column4" style="cursor: pointer;" >{{dealer.created_on|date:'short'}}</td>
                   <td class="cell100 column5" style="cursor: pointer;" >{{dealer.expire_date|date:'short'}}</td>
                   <td class="cell100 column6" style="cursor: pointer;" >{{dealer.last_activity_on|date:'dd/MM/yyyy , h:mm:ss a'}}</td>
                   <td class="cell100 column7" style="cursor: pointer;" >{{dealer.last_login|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
                   <td class="cell100 column8" style="cursor: pointer;" >{{dealer.login_type?dealer.login_type:"NA"}}</td> 
                   <td class="cell100 column9" style="cursor: pointer;" >{{dealer.total_vehicle?dealer.total_vehicle:0}}</td>
                   <td class="cell100 column10" style="cursor: pointer;" >{{dealer.delDevices?dealer.delDevices:0}}</td>
                   <!-- <td class="cell100 column11" style="cursor: pointer;" >{{dealer.point_Allocated?dealer.point_Allocated:0}}</td> -->
                   <!-- <td class="cell100 column11" style="cursor: pointer;" >{{availablePoint(dealer)}}</td> -->
                   <td class="cell100 column12" style="cursor: pointer;text-align: center;" >{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td>  
                   <!-- <td class="cell100 column13" style="text-align: center;">  
                     <i class="far fa-folder-open" md-tooltip="View/Download" style="cursor: pointer;" (click)="viewDocuments(dealer)"></i>           
                   </td>  -->
                   <td class="cell100 column14" style="text-align: center">
                     <i class="far fa-edit" md-tooltip="Edit" style="cursor: pointer;color:#08de85" (click)="edit_DealerDetail(dealer)"></i>
                    
                   </td>
                   <td class="cell100 column15" style="text-align: center">
                     <i class="fas fa-trash-alt" md-tooltip="Delete" style="cursor: pointer;color:#ff0707;" (click)="delete_DealerDetail(dealer)"></i>
                 
                   </td>
                   <!-- <td class="cell100 column16" style="text-align: center">
                     <md-slide-toggle [(ngModel)]="dealer.status" style="height: 0px !important" ngDefaultControl (change)="onChange(dealer,$event)"></md-slide-toggle>
                   </td> -->
                   <!-- <td class="cell100 column17" style="text-align: center;">
                     <i class="fas fa-user-shield" title="Additonal Access"  (click)="user_permission(dealer)"></i> 
                   </td> -->
                   <!-- <td class="cell100 column18" style="text-align: center;">    
                     <i id="pointShare" style="cursor:pointer;color:#f5b515;" class="fas fa-coins" (click)="addPoints(dealer)"></i>
                   </td>   -->
                   <!-- <td class="cell100 column16" style="text-align: center">
                     <md-slide-toggle [(ngModel)]="dealer.accountSuspended" style="height: 0px !important" ngDefaultControl (change)="accountStatusonChange(dealer,$event)"></md-slide-toggle>
                   </td>  -->
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
<!-- (click)="dealerSwitch(dealer)" -->
