<div style="top: 0;position: absolute;">
  <app-all-menus></app-all-menus>

</div>
<div class="loading" *ngIf="Load">Loading&#8230;</div>
<div class="main">
  <!-- <div class="card"> -->
  <div class="topnav">
    <a class="active">User Transfer</a>

    <div class="search-container">
      <form [formGroup]="searchForm" (ngSubmit)="submit()">
        <input type="text" placeholder="Search by userId/phone" formControlName="imei"
          [ngClass]="{ 'is-invalid': submitted && f.imei.errors }" name="imei">
        <button type="submit"><i class="fa fa-search"></i></button>

        <div *ngIf="submitted && f.imei.errors" class="invalid-feedback">
          <div *ngIf="f.imei.errors.required">Please Enter UserId/Phone</div>
        </div>
      </form>
    </div>

  </div>

<!-- Name:[''],
email:[''],
Dealer:[''],
supAdmin:[''],
accountSuspended:[''],
user_id:[''],
created_on:[''],
expire_date:[''], -->
  <div style="padding-left:16px">
    <form [formGroup]="deviceForm" class="row g-3 mt-3">
      <div class="col-md-4">
        <label class="form-label">Name</label>
        <input type="text" readonly formControlName="Name" class="form-control">
      </div>
      

      <div class="col-md-4">
        <label class="form-label">Email</label>
        <input type="text" readonly formControlName="email" class="form-control">
      </div>

       <div class="col-md-4">
        <label class="form-label">User ID</label>
        <input type="text" readonly formControlName="user_id" class="form-control">
      </div>

      <div class="col-md-4">
          <label class="form-label">Super Admin</label>
          <select id="distributer" multiple="multiple">
            <option *ngFor="let item of ditributers" [value]="item._id" [selected] = "item._id === selectedSupAdmin">{{item.first_name?item.first_name:""}} {{item.last_name?item.last_name:""}}</option>

          </select>
          <!-- <input type="text"  formControlName="superAdmin" class="form-control"> -->
        </div>

     <div class="col-md-4">
          <label class="form-label">Dealer</label>
           <select id="dealer" multiple="multiple">
            <option *ngFor="let item of dealers" [value]="item._id" [selected] = "item._id === selectedDealer">{{item.first_name?item.first_name:""}} {{item.last_name?item.last_name:""}}</option>

          </select>
          <!-- <input type="text" readonly formControlName="dealaer" class="form-control"> -->
        </div>

       

      <!-- <div class="col-md-4">
        <label class="form-label">Super Admin</label>
        <input type="text" readonly formControlName="supAdmin" class="form-control">
      </div> -->

      <!-- <div class="col-md-4">
        <label class="form-label">Account Suspended</label>
        <input type="text" readonly formControlName="accountSuspended" class="form-control">
      </div>

     

      <div class="col-md-4">
        <label class="form-label">Created On</label>
        <input type="text" readonly formControlName="created_on" class="form-control">
      </div>

      <div class="col-md-4">
        <label class="form-label">Expiry Date</label>
        <input type="text" readonly formControlName="expire_date" class="form-control">
      </div>

      <div class="col-md-4">
        <label class="form-label">Deleted</label>
        <input type="text" readonly formControlName="DeletedUser" class="form-control">
      </div> -->


      <div *ngIf="deleteShow" class="col-md-12 text-center mt-4">
        <button class="btn btn-danger" (click)="deleteDevice()">Save <i class="fa fa-save"></i></button>
      </div>

      <!-- <div *ngIf="deleted" class="col-md-12 text-center mt-4">
        <button class="btn btn-danger" (click)="deleteDevicePermenatly()">Delete Permanatly <i
            class="fa fa-trash"></i></button>
      </div> -->


    </form>
  </div>

</div>
<!-- </div> -->