<app-dns-loading [isDnsLoading]="isLoadingData"></app-dns-loading>
<div class="layout-container">
  <app-side-menu></app-side-menu>
  <div class="content-area">
    <app-main-header></app-main-header>
    <div class="container-fluid">
      <div class="row" style="padding-top: 100px;">
        <div class="col-sm-12">
          <h1 style="font-weight:500;margin-bottom: 10px;">Orphan Users</h1>
          <div style="display: flex; align-items: center;">
            <div style="height: 20%; position: relative;width: 200px;">
              <!-- <i class="fas fa-search" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #ccc; /* Light gray color */"></i> -->
              <!-- <input type="text" placeholder="Search"
                     style="margin-left: 0px; padding: 8px 10px; height: 38px;
                           width:100%; margin-top: 0px; margin-bottom: 0px; padding-right: 35px; /* Increased padding-right */"
                     [(ngModel)]="searchText" (ngModelChange)="applyFilter()" matInput #input> -->
            
                   <div style="position: relative; width: 200px;">
                        <i class="fas fa-search"
                            style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #ccc;"></i>
                        <input type="text" placeholder="Search" style="padding: 8px 35px 8px 10px; height: 38px; width: 100%;"
                            [(ngModel)]="searchText" (ngModelChange)="applyFilter()" matInput #input>
                    </div>  
                    </div>
          
      </div>
          <section  class="example-container" style="margin-top: 10px;">
            <table id="table1" mat-table [dataSource]="orphanUsersDataSource" matSort matSortActive="id" matSortDirection="desc" class="mat-elevation-z8">
              <!-- Checkbox Column -->
              <!-- ID Column -->
<ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let orphanUser"> {{ orphanUser.id }} </td>
</ng-container>

<!-- User ID Column -->
<ng-container matColumnDef="userId">
  <th mat-header-cell *matHeaderCellDef> User ID </th>
  <td mat-cell *matCellDef="let orphanUser"> {{ orphanUser.userId }} </td>
</ng-container>

<ng-container matColumnDef="createdDateTime">
  <th mat-header-cell *matHeaderCellDef> Created Date Time </th>
  <td mat-cell *matCellDef="let orphanUser"> {{ orphanUser.createdDatetime |dateFallback }} </td>
</ng-container>

<!-- User Name Column -->
<ng-container matColumnDef="userName">
  <th mat-header-cell *matHeaderCellDef> User Name </th>
  <td mat-cell *matCellDef="let orphanUser"> {{ orphanUser.userName }} </td>
</ng-container>

<!-- Mobile Number Column -->
<ng-container matColumnDef="mobileNumber">
  <th mat-header-cell *matHeaderCellDef> Mobile Number </th>
  <td mat-cell *matCellDef="let orphanUser"> {{ orphanUser.mobileNumber }} </td>
</ng-container>

<!-- Organisation ID Column -->
<ng-container matColumnDef="organisationId">
  <th mat-header-cell *matHeaderCellDef> Organisation ID </th>
  <td mat-cell *matCellDef="let orphanUser">
    {{ orphanUser.organisationId | nullFallback}}
  </td>
</ng-container>

<!-- Actions Column -->
<ng-container matColumnDef="actions">
  <th mat-header-cell *matHeaderCellDef> Actions </th>
  <td mat-cell *matCellDef="let orphanUser">
    <button class="btn btn-info" color="primary" (click)="deleteOrphanUser(orphanUser)">
      Delete
    </button>
  </td>
</ng-container>

              <!-- Header Row -->
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <!-- Data Rows -->
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>




            </table>
          </section>
          <mat-paginator style="font-size: 13px;" [pageSizeOptions]="[5, 10, 20, maxDataCount ]"
                showFirstLastButtons 
                aria-label="Select page of periodic elements">
               </mat-paginator>
        </div>
      </div>
    </div>
  </div>
</div>