<form #form="ngForm" class="bg-grey">
    <div class="ui-g ui-fluid mt-80">
        <div class="jobs-list-shorting">
            <div class="ui-g-3 d-job-title all-jobs-title">Workflows</div>
            <div class="ui-g-3">
                <a routerLink="/admin/edit-workflow-template" class="add-more-btn">Add Workflow Template</a>
            </div>
            <div class="shorting-dropdown">
                <div class="order-label">order by</div>
                <app-select-2 [data]="sortOptions" [value]="sortSelected" 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 job-template-cl1 ">
                            <div class="template-name heading">
                                <span class="calcField" (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
                            </div>
                        </div>
                        <div class="job-template-left job-template-cl2 no-border">
                        </div>
                        <div class="job-template-left job-template-cl3 no-border">
                        </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 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 job-template-cl1 ">
                            <div class="template-name heading">
                                <span class="calcField" (click)="onRowSelect(workflow)">{{workflow.TemplateName}}</span>
                            </div>
                        </div>
                        <div class="job-template-left job-template-cl2 no-border">
                        </div>
                        <div class="job-template-left job-template-cl3 no-border">
                        </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 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>
