<ng-container *ngIf="dataSourceTotal > 0">
  <div
    class="d-flex align-items-center justify-content-between gap-3 flex-wrap my-4"
  >
    <app-alert
      [message]="message"
      [bgColor]="bgColor"
      [textColor]="textColor"
    ></app-alert>

    <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. Urut</th>
          <th>Judul</th>
          <th>Deskripsi</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        <tr class="align-top" *ngFor="let d of dataSource; let i = index">
          <td class="text-center">{{ parseNumber(i) }}</td>
          <td [innerHTML]="d.title" class="break-word">
            {{ d.title }}
          </td>
          <td [innerHTML]="d.desc" class="break-word">
            {{ d.desc }}
          </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.title)"
              >
                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>
