
<ol class="breadcrumb breadcrumb-arrow font-trirong">
    <li><a href="javascript://" [routerLink]="['/cns-portal/dashboard/order']"> <clr-icon shape="home"></clr-icon></a></li>
    <li><a href="jvascript://">Data Management</a></li>
    <li><a href="javascript://">Validation Rule</a></li>
  </ol>
  <br>
  
  <div class="dg-wrapper">
    <div class="clr-row">
      <div class="clr-col-8">
        <h3>Validation Rule</h3>
      </div>
      <div class="clr-col-4" style="text-align: right;">
        <button class="btn btn-outline"  (click)="onExport()">
          <clr-icon shape="export"></clr-icon> xlsx
        </button>
        <button id="add" class="btn btn-primary"  (click)="goToAdd()">
          <clr-icon shape="plus"></clr-icon>ADD
        </button>
  
      </div>
    </div>
  
    <clr-datagrid [clrDgLoading]="loading" >
      <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
        <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
  
      <clr-dg-column [clrDgField]="'entity_name'"> <ng-container *clrDgHideableColumn="{hidden: false}">
       Entity Name
      </ng-container></clr-dg-column>
      <clr-dg-column [clrDgField]="'description'"> <ng-container *clrDgHideableColumn="{hidden: false}">
        Description
      </ng-container></clr-dg-column>
      <clr-dg-column [clrDgField]="'active'"> <ng-container *clrDgHideableColumn="{hidden: false}">
        Active
      </ng-container></clr-dg-column>
        <clr-dg-column [clrDgField]="'action'" style="width: 100px;"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Action
            </ng-container></clr-dg-column>
      <clr-dg-row *clrDgItems="let user of  data?.slice()?.reverse()" [clrDgItem]="user">
        <clr-dg-cell>{{user.entity_name}}</clr-dg-cell>
        <clr-dg-cell>{{user.description}}</clr-dg-cell>
        <clr-dg-cell>{{user.active}}</clr-dg-cell>
  <clr-dg-cell>
  <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-top-left">
  <span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
  <span class="tooltip-content">Delete</span>
  </a>
</clr-dg-cell>
        <clr-dg-action-overflow>
          <button class="action-item" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button>
          <!-- <button class="action-item" (click)="onDelete(user)">Delete<clr-icon shape="trash" class="is-error"></clr-icon></button> -->
          </clr-dg-action-overflow>
  
      </clr-dg-row>
  
      <clr-dg-footer>
        <clr-dg-pagination #pagination [clrDgPageSize]="10">
          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
          of {{pagination.totalItems}} users
        </clr-dg-pagination>
      </clr-dg-footer>
    </clr-datagrid>
  </div>

  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  
    <div class="modal-body" *ngIf="rowSelected.id">
      <h1 class="delete">Are You Sure Want to delete?</h1>
      <h2 class="heading">{{rowSelected.id}}</h2>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
      <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >Delete</button>
      </div>
    </div>
  </clr-modal>
  
  
  