<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="header">
                <div class="col-md-12">
                    <span class="mb-0 page-title">{{ "MY_WORKFLOWS" | translate }}</span>
                    <app-page-help-text code="CURRENT_WORKFLOWS"></app-page-help-text>
                </div>
            </div>
            <div class="body">
                <div class="table-responsive">
                    <div class="grid-height-large">
                        <table mat-table [dataSource]="dataSource">
                            <ng-container matColumnDef="detail">
                                <th mat-header-cell *matHeaderCellDef>
                                    {{ "ACTION" | translate }}
                                </th>
                                <td mat-cell *matCellDef="let workflowInstance">
                                    <button class="btn btn-sm btn-primary"
                                        (click)="viewVisualWorkflow(workflowInstance)">
                                        <i-feather name="eye" class="small-icon"></i-feather>
                                    </button>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="workflowname">
                                <th mat-header-cell *matHeaderCellDef>
                                    {{ "WORKFLOW_NAME" | translate }}
                                </th>
                                <td mat-cell *matCellDef="let workflowInstance">
                                    {{ workflowInstance?.workflowName }}
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="documentname">
                                <th mat-header-cell *matHeaderCellDef>
                                    {{ "DOCUMENT_NAME" | translate }}
                                </th>
                                <td mat-cell *matCellDef="let workflowInstance">
                                    <a class="doc-link" (click)="onDocumentView(workflowInstance.documentId)">
                                        {{ workflowInstance?.documentName }}
                                    </a>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="transition">
                                <th mat-header-cell *matHeaderCellDef>
                                    {{ "TRANSITIONS" | translate }}
                                </th>
                                <td mat-cell *matCellDef="let workflowInstance">
                                    <div class="transition-list">
                                        <ng-container>
                                            <ng-container *ngFor="let transition of workflowInstance.nextTransitions">
                                                <button (click)="performTransition(transition, workflowInstance)"
                                                    ngClass="workflow_{{transition.color}}"
                                                    class="btn  btn-sm mb-1 mt-1">
                                                    {{ transition.name }} ({{ transition.fromToStepName}})
                                                </button>
                                            </ng-container>
                                        </ng-container>
                                    </div>
                                </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>
                        <mat-paginator [length]="workflowInstances.length" [pageSize]="5"
                            [pageSizeOptions]="[5, 10, 20]" (page)="onPageChanged($event)">
                        </mat-paginator>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>