<ng-container *ngIf="dataSourceTotal > 0">
  <div
    class="d-flex align-items-center justify-content-between gap-3 flex-wrap my-4"
  >
    <div class="form-group d-flex align-items-center">
      <i
        *ngIf="dataSourceTotal > 0"
        class="position-absolute bi bi-search mx-auto ms-3"
        style="color: black"
      ></i>
      <input
        style="background: #f2f2f2; height: 48px; padding-left: 3rem"
        *ngIf="dataSourceTotal > 0"
        class="form-control border-0 form-control"
        type="text"
        placeholder="Cari data..."
        [formControl]="searchForm"
        [readonly]="dataSourceLength === 0 && queries.filter && !queries.search"
      />
    </div>
    <div>
      <button class="btn btn-primary" type="button" (click)="onCreate()">
        Tambah
      </button>
    </div>
  </div>
</ng-container>

<p *ngIf="dataSourceTotal == 0" class="text-body-tertiary mt-4">
  <i class="bi bi-exclamation-circle"></i> Belum ada data.
</p>

<ng-container *ngIf="dataSourceTotal > 0 && dataSourceLength > 0">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>No</th>
          <th>Nama</th>
          <th>Email</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let d of dataSource; let i = index">
          <td class="text-center">{{ parseNumber(i + 1) }}</td>
          <td>{{ d.fullname }}</td>
          <td>
            {{ d.email }}
          </td>
          <td>
            <div class="d-flex">
              <button
                class="btn btn-outline-primary me-2"
                type="button"
                (click)="onUpdate(d)"
              >
                Edit
              </button>
              <button
                class="btn btn-outline-primary"
                type="button"
                (click)="onDeleteData(d.id, d.fullname)"
              >
                Hapus
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div
    class="d-flex align-items-center justify-content-between gap-3 flex-wrap"
  >
    <div class="w-auto d-flex align-items-center gap-2">
      <span>Item per halaman</span>
      <select class="form-select w-auto" (change)="onPageSizeChange($event)">
        <option
          *ngFor="let p of pageSizeOptions"
          [value]="p"
          [selected]="p === queryLimit"
        >
          {{ p }}
        </option>
      </select>
      <span>dari {{ dataSourceLength }}</span>
    </div>

    <ngb-pagination
      [collectionSize]="dataSourceLength"
      [(page)]="queryPage"
      [maxSize]="5"
      [pageSize]="queryLimit"
      [rotate]="true"
      [ellipses]="false"
      [boundaryLinks]="false"
      [directionLinks]="true"
      class="mb-n3"
      (pageChange)="onPaginateChange($event)"
    ></ngb-pagination>
  </div>
</ng-container>
