<div class="row">
  <div class="col-sm-12">
    <ni-breadcrumb [menu]="breadcrumb" [style]="'custom2'" class="mb-4"></ni-breadcrumb>        
  </div>
  <div class="col-lg-12">
    <ni-card [title]="'Obligation' | translate" (refresh)="doRefresh($event)" [showRefresh]="true">
      <ni-table [headers]="obligationHeaders" [data]="obligations"></ni-table>
      <ni-alert *ngIf="obligations.length === 0" [color]="'warning'" [outline]="true"><strong>{{'noobligation' | translate}}</strong></ni-alert>
      <ni-pagination [totalItems]="total" [itemPerPage]="max" [currentPage]="page" *ngIf="obligations.length > 0" (changePage)="changePage($event)"></ni-pagination>
    </ni-card>
  </div>
</div>