<div>
  <div class="row">
    <div class="col-12">
      <span style="color:#855353;font-size:20px;font-weight: 500;">Renewal History</span>
      <button style="position: absolute;
  right: 0;
  top: 0" class="btn btn-danger btn-sm pull-left" (click)="this.dialogRef.close()">Close</button>
    </div>
  </div>

  <div class="card-body row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="loading" *ngIf="Load">Loading&#8230;</div>
      <div style="width: 100%;height:70vh;margin-top: 32px;">
        <table class="table table-striped">
          <thead>
            <tr>
              <th style="text-align: left;">{{'Device Name' | translate}}</th>
              <th style="text-align: left;">{{'Device IMEI' | translate}}</th>
              <th style="text-align: left;">{{'Created On' | translate}}</th>
              <th style="text-align: left;">{{'Expired On' | translate}}</th>
              <th style="text-align: left;">{{'Renewed On' | translate}}</th>
              <th style="text-align: left;">{{'Valid Till' | translate}}</th>
              <!-- <th style="text-align: left;">{{'Creation Date' | translate}}</th>
              <th style="text-align: left;">{{'Dealer name' | translate}}</th> -->
              <!-- <th style="text-align: left;">{{'Organization name' | translate}}</th> -->
    
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of main">
              <td>{{item.device.Device_Name}}</td> 
              <td>{{item.device.Device_ID}}</td>
              <td>{{item.created_on}}</td>
              <td>{{item.expired_on}}</td>
              <td>{{item.renewed_on}}</td>
              <td *ngIf="item.validDate">{{item.validDate}}</td>

            </tr>
            <tr *ngIf="main.length==0" class="text-center">
              <h5 style="position: absolute;right: 50%;top: 30%">No Data Found</h5>
            </tr>
          </tbody>
        </table>

      </div>
    </div>

  </div>

  </div>
