<div class="container" >
  <div class="row" style="float: left;margin-top: 30px">
    <input type="text" placeholder="Search by Name.." style="width: 150px;margin-left: 20px" [(ngModel)]="namefilter" >
    <input type="text" placeholder="Search by Contactno." style="width: 150px;margin-left: 20px;" [(ngModel)]="numberFilter">
    <input type="text" placeholder="Search by Email" style="width: 150px;margin-left: 20px" [(ngModel)]="emailFilter">
   <!-- <button value="search">Search</button>-->
  </div>
  <div class="table-responsive" style="width:100%">
    <table class="table">
      <thead>
      <tr>
        <th>S.No</th>
        <th>Name</th>
        <th>DOB</th>
        <th>Contact</th>
        <th>Email</th>
        <th>Balance(in Rs)</th>
        <th>Recharge</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of users | filter:namefilter:numberFilter:emailFilter">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.dateOfBirth}}</td>
        <td>{{item.contactNumber}}</td>
        <td>{{item.email}}</td>
        <td>{{item.accountBalance}}</td>
        <td><i class="material-icons" data-toggle="modal" data-target="#myModal" (click)="setUserId(item.id)">add</i></td>

        <div id="myModal" class="modal fade" role="dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Recharge Balance</h4>
            </div>
            <div class="modal-body">
              <label for="recharge">Amount(in Rs)</label>
              <input type="number" id="recharge" [(ngModel)]="amount"><br>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-default " data-dismiss="modal" (click)="recharge(amount)">
                Recharge
              </button>
            </div>
          </div>
        </div>
      </tr>
      </tbody>
    </table>
  </div>
</div>
