<div class="dashboard-content-area second-part">
    <form #form="ngForm">
        <div class="ui-g ui-fluid">
            <div class="jobs-list-shorting">
                <div class="ui-g-3 d-job-title all-jobs-title">Workflows</div>
                <div class="ui-g-4">
                    <a routerLink="/admin/edit-workflow-template" class="add-more-btn">Add Workflow Template</a>
                </div>
                <div class="listing-dropdown">
                    <span class="order-label mr-0">order by</span>
                    <app-select-2 [data]="sortOptions" [value]="sortOptions[0]" fieldLabel="description"
                                  (valChange)="sortWorkFlowTemplates($event)">
                    </app-select-2>
                </div>
            </div>
        </div>
        <div class="ui-g form-group pt-0">
            <div class="ui-g-12 ui-md-12 pt-0">
                <h3>My Templates</h3>
                <hr/>
                <div class="main-client-list">
                    <div class="template-list" *ngFor="let workflow of myTemplates" id="{{workflow.ObjectID}}">
                        <div class="template-row">
                            <div class="job-template-left w-80 job-template-cl1 no-border">
                                <div class="template-name heading">
                                    <span class="calcField"
                                          (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
                                </div>
                            </div>
                            <div class="job-template-left job-template-cl4">
                                <div class="m-user-right-padlock">
                                    <a>
                                    <span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon">
                                        <span class="pencil"></span>
                                    </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="template-list" *ngIf="myTemplates.length === 0">
                        <div class="template-row">
                            <div class="job-template-left w-80 job-template-cl1 no-border">
                                <div class="template-name heading">
                                    <span class="calcField">No records found.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h3>Shared Templates</h3>
                <hr/>
                <div class="main-client-list">
                    <div class="template-list" *ngFor="let workflow of sharedTemplates" id="{{workflow.ObjectID}}">
                        <div class="template-row">
                            <div class="job-template-left w-80 job-template-cl1 no-border">
                                <div class="template-name heading">
                                    <span class="calcField"
                                          (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
                                </div>
                            </div>
                            <div class="job-template-left job-template-cl4">
                                <div class="m-user-right-padlock">
                                    <a>
                                    <span (click)="onRowSelect(workflow)" class="m-user-right-padlockicon">
                                        <span class="pencil"></span>
                                    </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="template-list" *ngIf="sharedTemplates.length === 0">
                        <div class="template-row">
                            <div class="job-template-left w-80 job-template-cl1 no-border">
                                <div class="template-name heading">
                                    <span class="calcField">No records found.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
    </form>
</div>
