<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">
          {{ "WORKFLOW_SETTINGS" | translate }}
          <app-page-help-text code="MANAGE_WORKFLOW"></app-page-help-text>
        </span>
      </div>
      <div class="col-md-6 d-flex justify-content-end mb-2">
        <button [routerLink]="['/workflow-settings/manage/add']" class="btn btn-success btn-sm me-2"
          *hasClaim="'WORKFLOW_ADD_WORKFLOW'">
          <i-feather name="plus" class="small-icon"></i-feather>
          {{ "ADD_WORKFLOW" | translate }}
        </button>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <div class="table-responsive">
          <div class="grid-height-large">
            <table mat-table [dataSource]="workflowStore.workflows()">
              <ng-container matColumnDef="action">
                <th class="table-column-fix-270" mat-header-cell *matHeaderCellDef>
                  {{ "ACTION" | translate }}
                </th>
                <td mat-cell *matCellDef="let workflow">
                  <button *hasClaim="'WORKFLOW_UPDATE_WORKFLOW'"
                    [routerLink]="['/workflow-settings/manage', workflow.id]" class="btn btn-success btn-sm me-2">
                    <i-feather name="edit" class="small-icon"></i-feather>
                    <span class="d-none d-sm-inline">
                      {{ "EDIT" | translate }}</span>
                  </button>
                  <button *hasClaim="'WORKFLOW_DELETE_WORKFLOW'" (click)="deleteWorkflow(workflow)"
                    class="btn btn-danger btn-sm me-2" type="button">
                    <i-feather name="trash" class="small-icon"></i-feather>
                    <span class="d-none d-sm-inline">
                      {{ "DELETE" | translate }}</span>
                  </button>
                  <button *ngIf="workflow.isWorkflowSetup" class="btn btn-sm btn-primary"
                    (click)="viewVisualWorkflow(workflow)">
                    <i-feather name="eye" class="small-icon"></i-feather> <span class="d-none d-sm-inline">
                      {{ "VIEW" | translate }}</span>
                  </button>
                </td>
              </ng-container>
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>
                  {{ "NAME" | translate }}
                </th>
                <td mat-cell *matCellDef="let workflow">{{ workflow.name }}</td>
              </ng-container>
              <ng-container matColumnDef="description">
                <th mat-header-cell *matHeaderCellDef>
                  {{ "DESCRIPTION" | translate }}
                </th>
                <td mat-cell *matCellDef="let workflow">
                  {{ workflow.description }}
                </td>
              </ng-container>
              <ng-container matColumnDef="setupStatus">
                <th mat-header-cell *matHeaderCellDef>
                  {{ "SETUP_STATUS" | translate }}
                </th>
                <td mat-cell *matCellDef="let workflow">
                  {{ workflow.isWorkflowSetup ? ("COMPLETED" | translate) : ("DRAFT" | translate) }}
                </td>
              </ng-container>
              <tr *matNoDataRow>
                <td colspan="5">
                  <div class="m-2">
                    <b> {{ "NO_DATA_FOUND" | translate }}</b>
                  </div>
                </td>
              </tr>
              <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>