<!-- <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="javascript://"><clr-icon shape="crown"></clr-icon>Super Admin</a></li>
    <li><a href="javascript://">Report Builder</a></li>
  </ol> -->
  <!-- <span style="float: right;"><button *ngIf="!backQuery" type="submit" class="btn btn-primary" (click)="onBack()">Back</button></span>
  <div *ngIf="backQuery"> -->
  <div class="container">
  
  
    <div class="clr-row">
      <div class="clr-col-8">
        <h3>SQL Worksheet-
          <ng-template #no> <b>connection name</b></ng-template>
          <b *ngIf="databaseName;else no" style="color:#0072a3 ;">{{databaseName}}</b>
          <span class="label label-light-green p7" style="margin-top: .4em; display: inline; cursor: pointer;"
            (click)="opendatabsemo()">switch</span>
          <span class="label label-light-green p7" style="margin-top: .4em; display: inline; cursor: pointer;"
            (click)="opencopym()">Add New</span>
        </h3>
  
      </div>
  
      <div class="clr-col-4" style="text-align: right;">
        <button mat-raised-button class="btn btn-primary" (click)="addTab(selectAfterAdding.checked)">
          <clr-icon shape="plus"></clr-icon> new tab
        </button>
        <span #selectAfterAdding> </span>
      </div>
    </div>
  
    <clr-tabs [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
      <clr-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
        <button clrTabLink>{{tab}}{{index+1}}</button>
        <clr-tab-content *clrIfActive>
  
          <div class="clr-row">
            <div class="clr-col-8">
              <!-- <h5> Contents for {{tab}}{{index+1}} tab </h5> -->
              <div class="clr-row" style="padding-left: 10px;">
              <div>
                <!-- <label for="tags">
                      <span class="label label-light-green p7" style="margin-top: .4em; display: inline; cursor: pointer;" (click)="opentablemod()">Add Table</span>
                    </label> -->
                <!-- <textarea type="text" id="sql_query" name="sql_query" cols="10" rows="3"   placeholder="select table here"
                   name="selectedtable" [(ngModel)]="selectedtable" >
                    </textarea> -->
                   
                    <clr-combobox-container>
                      <label>Table List</label>
                      <clr-combobox [(ngModel)]="selectedtable" name="selectedtable" clrMulti="true"
                       required>
                       
                        <ng-container *clrOptionSelected="let selected;let i = alias">
                          {{selected}} <b>{{ getAliasedColumn(selected) }}</b>
                        </ng-container>
                        <clr-options>
                          <clr-option *clrOptionItems="let state of tableList" [clrValue]="state">
                            {{state}}
                          </clr-option>
                        </clr-options>
                      </clr-combobox>
                    </clr-combobox-container>
              </div>
              <div style="padding-top: 12px; padding-bottom: 0px;"><br><button class="btn btn-icon btn-sm btn-primary" style="margin-left: 5px;"
                (click)="opentcolmod()"><clr-icon shape="step-forward-2"></clr-icon></button></div>
  
            </div>
            <div class="clr-row" style="padding-left: 10px;">
              <div>
                <!-- <label for="tags" class="req"> <span class="label label-light-green p7" style="margin-top: .4em; display: inline; cursor: pointer;"  (click)="opentcolmod()" >Add Select String</span></label> -->
               
                <!-- <textarea type="text" id="sql_query" name="sql_query" cols="10" rows="3"  placeholder="select string here"
                    name="selectedcol" [(ngModel)]="selectedcol" >
                    </textarea> -->
                    <clr-combobox-container>
                      <label>Column List</label>
                      <clr-combobox [(ngModel)]="selectedcol" name="selectedcol" clrMulti="true"
                       required>
                        <ng-container *clrOptionSelected="let selected">
                          <ng-container *ngIf="selected.indexOf('.') !== -1; else noDot">
                            <span class="bold">{{ selected.substr(0, selected.indexOf('.')) }}</span>{{ selected.substr(selected.indexOf('.')) }}
                          </ng-container>
                          <ng-template #noDot>
                            {{selected}}
                            </ng-template>
                        </ng-container>
                        <clr-options>
                          <clr-option *clrOptionItems="let state of collist" [clrValue]="state">
                            {{state}}
                          </clr-option>
                        </clr-options>
                      </clr-combobox>
                    </clr-combobox-container>
              </div>
              <div style="padding-top: 12px; padding-bottom: 0px;"><br><button class="btn btn-icon btn-sm btn-primary" style="margin-left: 5px;" (click)="colname()"><clr-icon shape="step-forward-2"></clr-icon></button></div>
              <div style="padding-top: 12px; padding-bottom: 0px;"><p *ngIf="msg" style="color: red;">{{msg}} </p></div>
              </div>
              <div class="clr-row" style="padding-left: 10px;">
                <div>
                    <clr-combobox-container>
                      <label>Condition List</label>
                      <clr-combobox [(ngModel)]="selectedcol1" name="selectedcol1" clrMulti="true"
                       required>
                        <ng-container *clrOptionSelected="let selected">
                          <span *ngFor="let data of conditionData">
                          <b *ngIf="data.fields_name == selected">{{data.andor}}</b></span>&nbsp;
                          <ng-container *ngIf="selected.indexOf('.') !== -1; else noDot">
                            <span class="bold">{{ selected.substr(0, selected.indexOf('.')) }}</span>{{ selected.substr(selected.indexOf('.')) }}
                          </ng-container>
                          <ng-template #noDot>
                            {{selected}}
                          </ng-template>
                          <span *ngFor="let data of conditionData">
                          <b *ngIf="data.fields_name == selected">{{data.condition}} {{data.value}}</b></span>
                        
                        </ng-container>
                        <clr-options>
                          <clr-option *clrOptionItems="let state of collist" [clrValue]="state">
                            {{state}}
                          </clr-option>
                        </clr-options>
                      </clr-combobox>
                    </clr-combobox-container>
              </div>
              <div style="padding-top: 12px; padding-bottom: 0px;"><br><button class="btn btn-icon btn-sm btn-primary" style="margin-left: 5px;" (click)="filter(selectedcol1)"><clr-icon shape="filter"></clr-icon></button></div>
              <div style="padding-top: 12px; padding-bottom: 0px;"><p *ngIf="msg" style="color: red;">{{msg}} </p></div>
              </div>

              <div class="clr-row" style="padding-left: 10px;">
                <div>
                  <!-- <label for="tags" class="req"> <span class="label label-light-green p7" style="margin-top: .4em; display: inline; cursor: pointer;"  (click)="opentcolmod()" >Add Select String</span></label> -->
                 
                  <!-- <textarea type="text" id="sql_query" name="sql_query" cols="10" rows="3"  placeholder="select string here"
                      name="selectedcol" [(ngModel)]="selectedcol" >
                      </textarea> -->
                      <clr-combobox-container>
                        <label>Select Parameter List</label>
                        <clr-combobox [(ngModel)]="selectedParamter" name="selectedParamter" clrMulti="true"
                         required>
                          <ng-container *clrOptionSelected="let selected">
                            <ng-container *ngIf="selected.indexOf('.') !== -1; else noDot">
                              <span class="bold">{{ selected.substr(0, selected.indexOf('.')) }}</span>{{ selected.substr(selected.indexOf('.')) }}
                            </ng-container>
                            <ng-template #noDot>
                              {{selected}}
                              </ng-template>
                          </ng-container>
                          <clr-options>
                            <clr-option *clrOptionItems="let state of collist" [clrValue]="state">
                              {{state}}
                            </clr-option>
                          </clr-options>
                        </clr-combobox>
                      </clr-combobox-container>
                </div>
                <div style="padding-top: 12px; padding-bottom: 0px;"><br><button class="btn btn-icon btn-sm btn-primary" style="margin-left: 5px;"><clr-icon shape="step-forward-2"></clr-icon></button></div>
                <div style="padding-top: 12px; padding-bottom: 0px;"><p *ngIf="msg" style="color: red;">{{msg}} </p></div>
                </div>

                <div class="clr-row" style="padding-top: 10px;">
                  <div class="clr-col-md-4 clr-col-sm-12">
                    <label for="title">Data Parameters Required</label>
                    <select [(ngModel)]="dataParameter" name="dataParameter" colspan="2" class="clr-dropdown" >
                     <option value="null">Select Data Parameters</option>
                      <option>Yes</option>
                      <option>No</option>
                </select>
                  </div>
                  <div class="clr-col-md-4 clr-col-sm-12">
                    <label for="title">Folder Name</label>
                    <select [(ngModel)]="foldername" name="foldername" colspan="2" class="clr-dropdown" >
                     <option value="null">Select Folder Name</option>
                      <option>Report 1</option>
                      <option>Report 2</option>
                </select>
                  </div>
                </div>
            </div>
  
            <div class="clr-col-4" style="text-align: right;">
              <button mat-raised-button class="btn btn-primary" [disabled]="tabs.length === 1" (click)="removeTab(index)">
                <clr-icon shape="trash"></clr-icon> {{tab}}{{index+1}}
              </button>
            </div>
          </div>
          <div class="container" style="margin-top: 20px;">
            <div class="progressform">
              <div class="clr-row">
              </div>
              <form [formGroup]="entryForm">
                <div class="clr-row">
                  <div class="clr-col-md-6 clr-col-sm-12">
                    <label for="tags"> <span class="label label-light-green p7"
                        style="margin-top: .4em; display: inline; cursor: pointer;" (click)="openquerymod()">Select
                        Query</span>
                    </label>
                    <label for="tags"> <span class="label label-light-green p7"
                        style="margin-top: .4em; display: inline; cursor: pointer;" (click)="savequery()">save
                        Query</span>
                    </label>
                    <textarea type="text" id="sql_query" name="sql_query" formControlName="sql_query" cols="10" rows="3"
                      [(ngModel)]="selectedquery" placeholder="Enter Query here">
                    </textarea>
                  </div>
                </div>
              </form>
              <span style="float: right;">
                <button  type="submit" class="btn btn-primary" (click)="saveReport()">SAVE REPORT</button>
                <button  type="submit" class="btn btn-primary" (click)="onSubmit()">RUN</button>
              </span><br>
              <div>
                <h4 style="font-weight: 300;display: inline;">Response</h4>
              </div>
              <hr>
              <div class="clr-row" style="padding-top: 10px;">
              </div>
            </div>
          </div><br>
        </clr-tab-content>
      </clr-tab>
    </clr-tabs>
  </div>
  <!-- </div> -->
  
  <table class="table">
    <thead>
      <tr>
        <th *ngFor="let co of getHeaders();let i=index">{{co}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of rows">
        <td *ngFor="let key of getHeaders()">{{item[key]}}</td>
      </tr>
    </tbody>
  </table>
  
  <clr-modal [(clrModalOpen)]="database" [clrModalSize]="'xl'">
    <h3 class="modal-title"><b>Select Database</b></h3>
    <div class="modal-body">
      <div class="clr-row">
        <div class="clr-col-md-12 clr-col-sm-12" style="margin-top: 8px;">
          <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input" name="searchtable"
            [(ngModel)]="searchdatabase">
        </div>
      </div>
      <clr-datagrid [clrDgLoading]="loading">
        <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
          <div *ngIf="errorco;else loadingSpinner">{{errorco}}</div>
        </clr-dg-placeholder>
        <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            No
          </ng-container></clr-dg-column>
        <clr-dg-column [clrDgField]="'name'"> <ng-container *clrDgHideableColumn="{hidden: false}">
           Database 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]="'type'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Type
          </ng-container></clr-dg-column>
          <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}"> <clr-icon shape="bars"></clr-icon> 
            Action
          </ng-container></clr-dg-column>
        <clr-dg-row *ngFor="let user of databaselist | filter:searchdatabase;let i = index">
          <clr-dg-cell>{{i+1}}</clr-dg-cell>
          <clr-dg-cell style="color: rgb(108, 108, 194); cursor: pointer;" (click)="databasename(user)">{{user.name}}</clr-dg-cell>
          <clr-dg-cell>{{user.description}}</clr-dg-cell>
          <clr-dg-cell>{{user.active}}</clr-dg-cell>
          <clr-dg-cell id="word">{{user.type}}</clr-dg-cell>
          <clr-dg-cell>
            <span style="cursor: pointer;padding: 10px; "><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
            <!-- <span style="cursor: pointer;"><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);;"></clr-icon></span> -->
            </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]">Record per page</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            of {{pagination.totalItems}} Records
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </clr-modal>
  
  <clr-modal [(clrModalOpen)]="table" [clrModalSize]="'lg'">
    <h3 class="modal-title"><b>Select From Table List:</b></h3>
    <div class="modal-body">
      <div class="clr-row">
        <div class="clr-col-md-12 clr-col-sm-12" style="margin-top: 8px;">
          <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input" name="searchtable"
            [(ngModel)]="searchtable">
        </div>
      </div>
      <clr-datagrid [clrDgLoading]="loading">
        <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
          <div *ngIf="errortb;else loadingSpinner">{{errortb}}</div>
        </clr-dg-placeholder>
        <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            No
          </ng-container></clr-dg-column>
        <clr-dg-column [clrDgField]="'tableList'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Table Name
          </ng-container></clr-dg-column>
        <clr-dg-row *ngFor="let user of tableList | filter:searchtable;let i = index" [clrDgItem]="user">
          <clr-dg-cell>{{i+1}}</clr-dg-cell>
          <clr-dg-cell style="color: rgb(108, 108, 194);" (click)="tablename(user)">{{user}}</clr-dg-cell>
        </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}} Record
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </clr-modal>
  
  <clr-modal [(clrModalOpen)]="col" [clrModalSize]="'lg'">
    <h3 class="modal-title"><b>Select From Tables Columns List:</b></h3>
    <div class="modal-body">
      <div class="clr-row">
        <div class="clr-col-md-12 clr-col-sm-12" style="margin-top: 8px;">
          <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input" name="searchtable"
            [(ngModel)]="searchcol">
        </div>
      </div>
      <clr-datagrid [clrDgLoading]="loading">
        <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
          <div *ngIf="errorcl;else loadingSpinner">{{errorcl}}</div>
        </clr-dg-placeholder>
        <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            No
          </ng-container></clr-dg-column>
        <clr-dg-column [clrDgField]="'tableList'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Column Name
          </ng-container></clr-dg-column>
        <clr-dg-row *ngFor="let user of collist | filter:searchcol;let i = index">
          <clr-dg-cell>{{i+1}}</clr-dg-cell>
          <clr-dg-cell style="color: rgb(108, 108, 194);" (click)="colname(user)">{{user}}</clr-dg-cell>
        </clr-dg-row>
  
        <clr-dg-footer>
          <clr-dg-pagination #pagination [clrDgPageSize]="10">
            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            of {{pagination.totalItems}} Records
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </clr-modal>
  
  <clr-modal [(clrModalOpen)]="col1" [clrModalSize]="'lg'">
    <h3 class="modal-title"><b>Select From Tables Columns List:</b></h3>
    <div class="modal-body">
      <div class="clr-row">
        <div class="clr-col-md-12 clr-col-sm-12" style="margin-top: 8px;">
          <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input" name="searchtable"
            [(ngModel)]="searchcol">
        </div>
      </div>
      <clr-datagrid [clrDgLoading]="loading">
        <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
        <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            No
          </ng-container></clr-dg-column>
        <clr-dg-column [clrDgField]="'tableList'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Column Name
          </ng-container></clr-dg-column>
        <clr-dg-row *ngFor="let user of collist | filter:searchcol;let i = index">
          <clr-dg-cell>{{i+1}}</clr-dg-cell>
          <clr-dg-cell style="color: rgb(108, 108, 194);" (click)="colname1(user)">{{user}}</clr-dg-cell>
        </clr-dg-row>
  
        <clr-dg-footer>
          <clr-dg-pagination #pagination [clrDgPageSize]="10">
            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            of {{pagination.totalItems}} Records
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </clr-modal>
  
  <clr-modal [(clrModalOpen)]="query" [clrModalSize]="'lg'">
    <h3 class="modal-title"><b>Select Query:</b></h3>
    <div class="modal-body">
      <div class="clr-row">
        <div class="clr-col-md-12 clr-col-sm-12" style="margin-top: 8px;">
          <input id="data" type="text" placeholder="Enter search Criteria" class="clr-input" name="searchtable"
            [(ngModel)]="searchquery">
        </div>
      </div>
      <clr-datagrid [clrDgLoading]="loading">
        <clr-dg-placeholder><clr-spinner [clrMedium]="true">Loading ...</clr-spinner></clr-dg-placeholder>
        <clr-dg-column [clrDgField]="'id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            No
          </ng-container></clr-dg-column>
        <clr-dg-column [clrDgField]="'query'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Query
          </ng-container></clr-dg-column>
  
        <clr-dg-row *ngFor="let user of querydata | filter:searchquery;let i = index">
          <clr-dg-cell>{{i+1}}</clr-dg-cell>
          <clr-dg-cell style="color: rgb(108, 108, 194);"
            (click)="selectquery(user.sql_query)">{{user.sql_query}}</clr-dg-cell>
  
        </clr-dg-row>
  
        <clr-dg-footer>
          <clr-dg-pagination #pagination [clrDgPageSize]="10">
            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            of {{pagination.totalItems}} Records
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </clr-modal>
  
  <clr-modal [(clrModalOpen)]="addmodal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title"> Create New</h3>
    <div class="modal-body">
      <form [formGroup]="addForm" (ngSubmit)="onCreate()">
        <div class="clr-row">
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Conn_String<span class="required-field">*</span></label>
            <input type="text" formControlName="conn_string" class="clr-input">
          </div>
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Username<span class="required-field">*</span></label>
            <input type="text" formControlName="username" class="clr-input">
          </div>
        </div>
        <div class="clr-row">
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Password<span class="required-field">*</span></label>
            <input type="text" formControlName="password" class="clr-input">
          </div>
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Driver_class_name<span class="required-field">*</span></label>
            <input type="text" formControlName="driver_class_name" class="clr-input">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline" (click)="addmodal = false">Cancel</button>
          <button type="submit" class="btn btn-primary">Add</button>
        </div>
      </form>
    </div>
  </clr-modal>

  <clr-modal [(clrModalOpen)]="filterModel" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title"> Condition Table</h3>
    <div class="modal-body">
      <form>
  
  
        <div class="clr-row fieldWrapper" >
            <div class="clr-col-12">
                <table class="table table-striped table-bordered" style="margin-top: 0px;">
                    <thead>
                        <tr>
                            <th>ANDOR</th>
                            <th>FIELD NAME</th>
                            <th>CONDITION</th>
                            <th>VALUE</th>
                            <th class="right" style="width:125px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  *ngFor="let data of conditionData; let i = index">
                            <td ><select colspan="2" [(ngModel)]="data.andor" [ngModelOptions]="{standalone: true}" name="andor" class="clr-dropdown">
                                <option [ngValue]="null">Select Values</option>
                                <option *ngFor="let sub of andor" [ngValue]="sub">{{sub}}</option>
                                </select>
                            </td>
                           
                            <td><select colspan="2"  [(ngModel)]="data.fields_name" [ngModelOptions]="{standalone: true}" name="fields_name" class="clr-dropdown">
                                <option  [ngValue]="null">Select Field Name</option>
                                <!-- <option *ngFor="let sub of sourceTable" [ngValue]="sub">{{sub}}</option> -->
                                <option *ngFor="let item of collist" [ngValue]="item">{{item}}</option>
  
                                </select>
                            </td>
                            <td>
                             <select colspan="2" [(ngModel)]="data.condition" [ngModelOptions]="{standalone: true}" name="condition" class="clr-dropdown">
                                <option  [ngValue]="null">Select Values</option>
                                <option *ngFor="let sub of condition" [ngValue]="sub">{{sub}}</option>
                                </select>
                            </td>
                            <td><input type="text"   [(ngModel)]="data.value" [ngModelOptions]="{standalone: true}" name="value" class="clr-input"/></td>
                            <td style="width:40px;">
                                <a (click)="deleteRow(i)">
                                    <clr-icon shape="trash" class="is-error"></clr-icon>
                                </a>
                            </td>
                        </tr>
    
                    </tbody>
                    <button type="button" class="btn btn-primary button1" (click)="onAddLines()">
                        <clr-icon shape="plus"></clr-icon>
                    </button>
                </table>
            </div>
        </div>
    
        <div class="center">
            <button type="button" class="btn btn-outline" (click)="filterModel = false">Cancel</button>
            <button type="submit" form-control class="btn btn-primary" (click)="onSelected()">Select</button>
            <!-- <button type="button" form-control class="btn btn-primary" (click)="back()">Back</button> -->
        </div>
    </form>
    </div>
  </clr-modal>

  <clr-modal [(clrModalOpen)]="columnModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title"> Column Table</h3>
    <div class="modal-body">
      <form>
  
  
        <div class="clr-row fieldWrapper" >
            <div class="clr-col-12">
                <table class="table table-striped table-bordered" style="margin-top: 0px;">
                    <thead>
                        <tr>
                            <th>Column</th>
                            <th>Alias</th>
                            <th class="right" style="width:125px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  *ngFor="let data of columnData; let i = index">
                            <td >
                                <input type="text"  [(ngModel)]="data.columns" [ngModelOptions]="{standalone: true}" name="columns" class="clr-input" readonly/>
                            <td><input type="text"   [(ngModel)]="data.alias" [ngModelOptions]="{standalone: true}" name="alias" class="clr-input"/></td>
                            <td style="width:40px;">
                                <a (click)="deleteColRow(i)">
                                    <clr-icon shape="trash" class="is-error"></clr-icon>
                                </a>
                            </td>
                        </tr>
    
                    </tbody>
                    <button type="button" class="btn btn-primary button1" (click)="onAddColLines()">
                        <clr-icon shape="plus"></clr-icon>
                    </button>
                </table>
            </div>
        </div>
    
        <div class="center">
            <button type="submit" form-control class="btn btn-primary" (click)="onColSelected()">Select</button>
            <!-- <button type="button" form-control class="btn btn-primary" (click)="back()">Back</button> -->
        </div>
    </form>
    </div>
  </clr-modal>
<!-- 
  <clr-modal [(clrModalOpen)]="reportModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
    <h3 class="modal-title">ADD REPORT</h3>
    <div class="modal-body">
        <hr>
      <form [formGroup]="saveReportForm" ngForm>
        <div class="clr-row">
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Name</label>
            <input type="text" formControlName="name" class="clr-input">
          </div>
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Report Folder</label>
            <select colspan="2" formControlName="folder" class="clr-dropdown">
                <option Value="null">Select Folder</option>
                <option>folder</option>
                </select>
          </div>
        </div>
        <h4 class="modal-title">ADD PARAMETERS</h4><hr>
        <div class="clr-row">
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Add Date Parameters</label>
            <input type="checkbox" formControlName="date_param_flag" clrToggle value="billable"  />
          </div>
          <div class="clr-col-md-6 clr-col-sm-12">
            <label>Add Adhoc Parameters</label>
            <input type="checkbox" formControlName="adhoc_param_flag" clrToggle value="billable"  />
          </div>
        </div><br>
        <div class="clr-row">
            <div class="clr-col-md-12 clr-col-sm-12">
                <label>Add Standard Parameters</label>
                <table class="table table-striped table-bordered" style="margin-top: 0px;">
                    <thead>
                        <tr>
                            <th>COLUMN</th>
                            <th>LABEL</th>
                            <th>DATA TYPE</th>
                            <th>LIST</th>
                            <th class="right" style="width:125px;">ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  *ngFor="let data of stdParamters; let i = index">
                            <td ><select colspan="2" [(ngModel)]="data.column" [ngModelOptions]="{standalone: true}" name="column" class="clr-dropdown">
                                <option [ngValue]="null">Select Values</option>
                                <option *ngFor="let col of selectedcol" [ngValue]="col">{{col}}</option>
                                </select>
                            </td>
                            <td>
                                <input type="text"   [(ngModel)]="data.label" [ngModelOptions]="{standalone: true}" name="label"  class="clr-input"/>
                            </td>
                            <td>
                             <select colspan="2"  [(ngModel)]="data.dataType" [ngModelOptions]="{standalone: true}" name="dataType"  class="clr-dropdown">
                                <option value="null">Select Values</option>
                                <option>1</option>
                                </select>
                            </td>
                            <td>
                                <input type="text"   [(ngModel)]="data.list" [ngModelOptions]="{standalone: true}" name="list"   class="clr-input"/>
                            </td>
                            <td style="width:40px;">
                                <a (click)="deletestdRow(i)">
                                    <clr-icon shape="trash" class="is-error"></clr-icon>
                                </a>
                            </td>
                        </tr>
    
                    </tbody>
                    <button type="button" class="btn btn-primary button1" (click)="onAddstdLines()">
                        <clr-icon shape="plus"></clr-icon>
                    </button>
                </table>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline" (click)="reportModal = false">CANCLE</button>
          <button type="submit" class="btn btn-primary" (click)="rpt_builder()">SUBMIT</button>
        </div>
      </form>
    </div>
  </clr-modal> -->

  <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>