<div class="modal-header">
  <div class="modal-title h4">Status update for selected customers</div>
</div>
<div class="modal-body overlay overlay-block cursor-default">
  <ng-container *ngIf="isLoading">
    <div class="overlay-layer">
      <div class="spinner spinner-lg spinner-primary"></div>
    </div>
  </ng-container>

  <div class="table-responsive angular-bootstrap-table">
    <table class="table table-head-custom table-vertical-center overflow-hidden">
      <thead>
        <th>FIRSTNAME</th>
        <th>LASTNAME</th>
        <th>STATUS</th>
      </thead>
      <tbody>
        <tr *ngFor="let customer of customers">
          <td>{{customer.firstName}}</td>
          <td>{{customer.lastName}}</td>
          <td>
            <span class="label label-lg label-inline" [class.label-light-danger]="customer.status === 1"
              [class.label-light-success]="customer.status === 2" [class.label-light-primary]="customer.status === 3">
              <ng-container *ngIf="customer.status === 1">Suspended</ng-container>
              <ng-container *ngIf="customer.status === 2">Active</ng-container>
              <ng-container *ngIf="customer.status === 3">Pending</ng-container>
            </span>
          </td>
      </tbody>
    </table>
  </div>

</div>

<div class="form modal-footer">
  <div class="form-group mr-2">
    <select class="form-control" [(ngModel)]="status" name="status">
      <option value="1">Suspended</option>
      <option value="2">Active</option>
      <option value="3">Pending</option>
    </select>
  </div>
  <div class="form-group">
    <button type="button" class="btn btn-light btn-elevate mr-3" (click)="modal.dismiss()">Cancel</button>
    <button type="button" class="btn btn-primary btn-elevate" (click)="updateCustomersStatus()">Update Status</button>
  </div>
</div>