<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://"> Basicp3</a></li>
</ol>
<section class="ug-hero">
  <div class="ug-hero__content">
    <div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
    <div>
      <h2 class="ug-hero__title">Basicp3</h2>
    </div>
  </div>
  <div class="ug-hero__actions"> 
    <button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
      <clr-icon shape="plus"></clr-icon>
      <span class="ug-btn-text">ADD</span>
    </button>
   
  </div>
</section>


<div class="ug-toolbar">
  <div class="ug-toolbar__left">
    <div class="ug-search">
      <clr-icon shape="search"></clr-icon>
      <input class="ug-search__input" type="text" placeholder="SEARCH" [(ngModel)]="filterText" />
    </div>
  </div>
  <div class="ug-toolbar__right">
    <div class="ug-view-toggle">
      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
        <clr-icon shape="view-cards"></clr-icon>
      </button>
      <button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
        <clr-icon shape="table"></clr-icon>
      </button>
    </div>
  </div>
</div> 
<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
  <clr-dg-placeholder>
    <ng-template #loadingSpinner>
      <clr-spinner>LOADING ... </clr-spinner>
    </ng-template>
    <div *ngIf="error;else loadingSpinner">{{error}}</div>
  </clr-dg-placeholder>



 <clr-dg-column [clrDgField]="'toggle_switch'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      Toggle Switch
    </ng-container>
  </clr-dg-column>




 <clr-dg-column [clrDgField]="'toggle_switch2'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      Toggle Switch2
    </ng-container>
  </clr-dg-column>


 <clr-dg-column [clrDgField]="'url_field'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url Field
						 </ng-container></clr-dg-column>


 <clr-dg-column [clrDgField]="'url_field2'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url Field2
						 </ng-container></clr-dg-column>




 <clr-dg-column [clrDgField]="'decimal_field'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      Decimal Field
    </ng-container>
  </clr-dg-column>




 <clr-dg-column [clrDgField]="'decimal_field2'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      Decimal Field2
    </ng-container>
  </clr-dg-column>




 <clr-dg-column [clrDgField]="'percentage_field'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      Percentage Field
    </ng-container>
  </clr-dg-column>




 <clr-dg-column [clrDgField]="'percentage_field2'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      Percentage Field2
    </ng-container>
  </clr-dg-column>




 <clr-dg-column [clrDgField]="'documentsequenc'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      documentsequenc
    </ng-container>
  </clr-dg-column>




 <clr-dg-column [clrDgField]="'recaptcha'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      recaptcha
    </ng-container>
  </clr-dg-column>




 <clr-dg-column [clrDgField]="'recaptcha2'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      recaptcha2
    </ng-container>
  </clr-dg-column>

 
 <!-- who column -->
      <clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
        <clr-icon shape="bars"></clr-icon> Action
      </ng-container></clr-dg-column>
      <!-- end --> 
  <clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">

<clr-dg-cell>{{user.toggle_switch }}</clr-dg-cell>


<clr-dg-cell>{{user.toggle_switch2 }}</clr-dg-cell>


<clr-dg-cell (click)="goTourl_fieldUrl(user.url_field)" style="cursor: pointer; color: rgb(108, 108, 194);">{{user.url_field}}</clr-dg-cell>


<clr-dg-cell (click)="goTourl_field2Url(user.url_field2)" style="cursor: pointer; color: rgb(108, 108, 194);">{{user.url_field2}}</clr-dg-cell>


<clr-dg-cell>{{user.decimal_field }}</clr-dg-cell>


<clr-dg-cell>{{user.decimal_field2 }}</clr-dg-cell>


<clr-dg-cell>{{user.percentage_field }}</clr-dg-cell>


<clr-dg-cell>{{user.percentage_field2 }}</clr-dg-cell>


<clr-dg-cell>{{user.documentsequenc }}</clr-dg-cell>


<clr-dg-cell>{{user.recaptcha }}</clr-dg-cell>


<clr-dg-cell>{{user.recaptcha2 }}</clr-dg-cell>

 
  <!-- who column -->
<clr-dg-cell>
  <clr-signpost>
   <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
   <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
     <h5 style="margin-top: 0">Who Column</h5>
           <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
           <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
           <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
           <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
           <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
   </clr-signpost-content>
 </clr-signpost>
 </clr-dg-cell>
 
 <!-- who colmn --> 
 
 
    <clr-dg-action-overflow>
      <!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="onEdit(user)">
        <clr-icon shape="edit"></clr-icon>
        EDIT
      </button> -->
      <button class="ug-action-item" (click)="onEdit(user)">
        <clr-icon shape="edit"></clr-icon>
        EDIT
      </button>
      <button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
        <clr-icon shape="trash"></clr-icon>
 DELETE
      </button>
    </clr-dg-action-overflow>

</clr-dg-row>

  <clr-dg-footer class="ug-grid-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 class="ug-cards" *ngIf="viewMode==='cards'">
  <div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
 <div class="ug-card-item__body"> 
    
      <div class="ug-kv"><span>Toggle Switch</span><strong>{{user.toggle_switch}}</strong></div>


      <div class="ug-kv"><span>Toggle Switch2</span><strong>{{user.toggle_switch2}}</strong></div>


      <div class="ug-kv"><span>Url Field</span><strong>{{user.url_field}}</strong></div>


      <div class="ug-kv"><span>Url Field2</span><strong>{{user.url_field2}}</strong></div>


      <div class="ug-kv"><span>Decimal Field</span><strong>{{user.decimal_field}}</strong></div>


      <div class="ug-kv"><span>Decimal Field2</span><strong>{{user.decimal_field2}}</strong></div>


      <div class="ug-kv"><span>Percentage Field</span><strong>{{user.percentage_field}}</strong></div>


      <div class="ug-kv"><span>Percentage Field2</span><strong>{{user.percentage_field2}}</strong></div>


      <div class="ug-kv"><span>documentsequenc</span><strong>{{user.documentsequenc}}</strong></div>


      <div class="ug-kv"><span>recaptcha</span><strong>{{user.recaptcha}}</strong></div>


      <div class="ug-kv"><span>recaptcha2</span><strong>{{user.recaptcha2}}</strong></div>


 </div>
    <div class="ug-card-item__footer">
      
      <button class="ug-btn ug-btn-sm ug-btn-outline" (click)="onEdit(user)">
        <clr-icon shape="edit"></clr-icon> Edit
      </button>
      <button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
        <clr-icon shape="trash"></clr-icon> Delete
      </button>
    </div>
  </div>
</div>





















<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Add Basicp3</h3>
  <div class="modal-body">
    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">

<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">Toggle Switch</label>
              <div class="clr-toggle-wrapper">
                <input type="checkbox" id="toggle_switch" formControlName="toggle_switch" clrToggle>
                <label for="toggle_switch">Toggle Switch</label>
              </div>
            </div>
          </div>
        </div>


<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">Toggle Switch2</label>
              <div class="clr-toggle-wrapper">
                <input type="checkbox" id="toggle_switch2" formControlName="toggle_switch2" clrToggle>
                <label for="toggle_switch2">Toggle Switch2</label>
              </div>
            </div>
          </div>
        </div>


<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="url_field" class="ug-form-label">Url Field</label>
              <input type="url" id="url_field" class="ug-form-input" formControlName="url_field" placeholder="Enter Url Field">
              <div *ngIf="entryForm.controls['url_field'].errors" class="ug-form-error">
                <div *ngIf="entryForm.controls['url_field'].hasError('pattern')" class="error_mess">* Please enter a valid URL.</div>
              </div>
            </div>
          </div>
        </div>


<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="url_field2" class="ug-form-label">Url Field2</label>
              <input type="url" id="url_field2" class="ug-form-input" formControlName="url_field2" placeholder="Enter Url Field2">
              <div *ngIf="entryForm.controls['url_field2'].errors" class="ug-form-error">
                <div *ngIf="entryForm.controls['url_field2'].hasError('pattern')" class="error_mess">* Please enter a valid URL.</div>
              </div>
            </div>
          </div>
        </div>

  <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="decimal_field" class="ug-form-label">Decimal Field<span class="required-field">*</span></label>
              <input type="number" id="decimal_field" class="ug-form-input" formControlName="decimal_field" placeholder="Enter decimal value" step="0.01">
              <div *ngIf="submitted && entryForm.controls.decimal_field.errors" class="ug-form-error">
                <div *ngIf="submitted && entryForm.controls.decimal_field.errors.required">*This field is Required</div>
              </div>
            </div>
          </div>
        </div>


  <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="decimal_field2" class="ug-form-label">Decimal Field2<span class="required-field">*</span></label>
              <input type="number" id="decimal_field2" class="ug-form-input" formControlName="decimal_field2" placeholder="Enter decimal value" step="0.01">
              <div *ngIf="submitted && entryForm.controls.decimal_field2.errors" class="ug-form-error">
                <div *ngIf="submitted && entryForm.controls.decimal_field2.errors.required">*This field is Required</div>
              </div>
            </div>
          </div>
        </div>


<div class="form-row">
            <div class="form-col"> 
<div class="ug-form-group">
              <label for="percentage_field" class="ug-form-label">Percentage Field<span class="required-field">*</span></label>
              <input type="number" id="percentage_field" class="ug-form-input" formControlName="percentage_field" placeholder="Enter Percentage Field">
              <div *ngIf="submitted && entryForm.controls.percentage_field.errors" class="ug-form-error">
                <div *ngIf="submitted && entryForm.controls.percentage_field.errors.required">*This field is Required</div>
              </div>
            </div>
 </div>
            </div>

<div class="form-row">
            <div class="form-col"> 
<div class="ug-form-group">
              <label for="percentage_field2" class="ug-form-label">Percentage Field2<span class="required-field">*</span></label>
              <input type="number" id="percentage_field2" class="ug-form-input" formControlName="percentage_field2" placeholder="Enter Percentage Field2">
              <div *ngIf="submitted && entryForm.controls.percentage_field2.errors" class="ug-form-error">
                <div *ngIf="submitted && entryForm.controls.percentage_field2.errors.required">*This field is Required</div>
              </div>
            </div>
 </div>
            </div>



<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">recaptcha<span class="required-field">*</span></label>
              <div class="recaptcha-container">
                <div class="recaptcha-code">
                  <b>{{  recaptchaCode }}</b>
                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha()">
                    <clr-icon shape="refresh"></clr-icon>
                  </button>
                </div>
                <input type="text" class="ug-form-input" formControlName="recaptcha" placeholder="Enter the code above">
                <div *ngIf="submitted && entryForm.controls.recaptcha?.errors?.required" class="ug-form-error">*This field is Required</div>
                <div *ngIf="submitted && entryForm.get('recaptcha')?.errors && entryForm.get('recaptcha')?.dirty" class="ug-form-error">
                  <div *ngIf="submitted && entryForm.controls['recaptcha']?.hasError('recaptchaMismatch')" class="error_mess">recaptcha not valid.</div>
                </div>
              </div>
            </div>
          </div>
        </div>


<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">recaptcha2<span class="required-field">*</span></label>
              <div class="recaptcha-container">
                <div class="recaptcha-code">
                  <b>{{  recaptcha2Code }}</b>
                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha2()">
                    <clr-icon shape="refresh"></clr-icon>
                  </button>
                </div>
                <input type="text" class="ug-form-input" formControlName="recaptcha2" placeholder="Enter the code above">
                <div *ngIf="submitted && entryForm.controls.recaptcha2?.errors?.required" class="ug-form-error">*This field is Required</div>
                <div *ngIf="submitted && entryForm.get('recaptcha2')?.errors && entryForm.get('recaptcha2')?.dirty" class="ug-form-error">
                  <div *ngIf="submitted && entryForm.controls['recaptcha2']?.hasError('recaptcha2Mismatch')" class="error_mess">recaptcha2 not valid.</div>
                </div>
              </div>
            </div>
          </div>
        </div>



      <div class="modal-footer">
        <button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
        <button type="submit" class="ug-btn ug-btn-primary">ADD</button>
      </div>
    </form>
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Update Basicp3</h3>
  <div class="modal-body" *ngIf="rowSelected.id">
    
 <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">Toggle Switch</label>
              <div class="clr-toggle-wrapper">
                <input type="checkbox" id="toggle_switch" name="toggle_switch" clrToggle [(ngModel)]="rowSelected.toggle_switch">
                <label for="toggle_switch">Toggle Switch</label>
              </div>
            </div>
          </div>
        </div>


 <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">Toggle Switch2</label>
              <div class="clr-toggle-wrapper">
                <input type="checkbox" id="toggle_switch2" name="toggle_switch2" clrToggle [(ngModel)]="rowSelected.toggle_switch2">
                <label for="toggle_switch2">Toggle Switch2</label>
              </div>
            </div>
          </div>
        </div>

 <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="url_field" class="ug-form-label">Url Field</label>
              <input type="url" id="url_field" class="ug-form-input" name="url_field" [(ngModel)]="rowSelected.url_field" placeholder="Enter URL">
              <div *ngIf="!isValidurl_field(rowSelected.url_field)" class="ug-form-error">* Please enter a valid URL.</div>
            </div>
          </div>
        </div>

 <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="url_field2" class="ug-form-label">Url Field2</label>
              <input type="url" id="url_field2" class="ug-form-input" name="url_field2" [(ngModel)]="rowSelected.url_field2" placeholder="Enter URL">
              <div *ngIf="!isValidurl_field2(rowSelected.url_field2)" class="ug-form-error">* Please enter a valid URL.</div>
            </div>
          </div>
        </div>


        <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="decimal_field" class="ug-form-label">Decimal Field</label>
              <input type="number" id="decimal_field" class="ug-form-input" name="decimal_field" [(ngModel)]="rowSelected.decimal_field" placeholder="Enter decimal value" step="0.01">
            </div>
          </div>
        </div>


        <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="decimal_field2" class="ug-form-label">Decimal Field2</label>
              <input type="number" id="decimal_field2" class="ug-form-input" name="decimal_field2" [(ngModel)]="rowSelected.decimal_field2" placeholder="Enter decimal value" step="0.01">
            </div>
          </div>
        </div>


 <!-- Number Fields -->
          <div class="form-row">
            <div class="form-col">
              <div class="ug-form-group">
                <label for="percentage_field" class="ug-form-label">Percentage Field</label>
                <input type="number" id="percentage_field" class="ug-form-input" [(ngModel)]="rowSelected.percentage_field"
                  name="percentage_field" placeholder="Enter Percentage Field">
              </div>
            </div>
          </div>


 <!-- Number Fields -->
          <div class="form-row">
            <div class="form-col">
              <div class="ug-form-group">
                <label for="percentage_field2" class="ug-form-label">Percentage Field2</label>
                <input type="number" id="percentage_field2" class="ug-form-input" [(ngModel)]="rowSelected.percentage_field2"
                  name="percentage_field2" placeholder="Enter Percentage Field2">
              </div>
            </div>
          </div>




<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">recaptcha<span class="required-field">*</span></label>
              <div class="recaptcha-container">
                <div class="recaptcha-code">
                  <b>{{ recaptchaCode }}</b>
                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha()">
                    <clr-icon shape="refresh"></clr-icon>
                  </button>
                </div>
                <input type="text" class="ug-form-input" name="recaptcha" [(ngModel)]="rowSelected.recaptcha" (ngModelChange)="checkrecaptchaEdit()" placeholder="Enter the code above">
                <div *ngIf="recaptchaMismatch" class="ug-form-error">recaptcha not valid.</div>
              </div>
            </div>
          </div>
        </div>



<div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label class="ug-form-label">recaptcha2<span class="required-field">*</span></label>
              <div class="recaptcha-container">
                <div class="recaptcha-code">
                  <b>{{ recaptcha2Code }}</b>
                  <button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha2()">
                    <clr-icon shape="refresh"></clr-icon>
                  </button>
                </div>
                <input type="text" class="ug-form-input" name="recaptcha2" [(ngModel)]="rowSelected.recaptcha2" (ngModelChange)="checkrecaptchaEdit()" placeholder="Enter the code above">
                <div *ngIf="recaptcha2Mismatch" class="ug-form-error">recaptcha2 not valid.</div>
              </div>
            </div>
          </div>
        </div>



    <div class="modal-footer">
      <button type="button" class="ug-btn ug-btn-outline" (click)="modalEdit = false">Cancel</button>
      <button type="submit" (click)="onUpdate(rowSelected.id)" class="ug-btn ug-btn-primary">Update</button>
    </div>

<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <div class="modal-body" *ngIf="rowSelected.id">
    <div class="ug-delete-header">
      <div class="ug-delete-icon">
        <clr-icon shape="exclamation-triangle" size="48"></clr-icon>
      </div>
      <h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
      <p class="ug-delete-subtitle">This action cannot be undone</p>
    </div>

<div class="ug-delete-details"><div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Toggle Switch:</span>
        <span class="ug-delete-detail-value">{{rowSelected.toggle_switch}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Toggle Switch2:</span>
        <span class="ug-delete-detail-value">{{rowSelected.toggle_switch2}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Url Field:</span>
        <span class="ug-delete-detail-value">{{rowSelected.url_field}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Url Field2:</span>
        <span class="ug-delete-detail-value">{{rowSelected.url_field2}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Decimal Field:</span>
        <span class="ug-delete-detail-value">{{rowSelected.decimal_field}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Decimal Field2:</span>
        <span class="ug-delete-detail-value">{{rowSelected.decimal_field2}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Percentage Field:</span>
        <span class="ug-delete-detail-value">{{rowSelected.percentage_field}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Percentage Field2:</span>
        <span class="ug-delete-detail-value">{{rowSelected.percentage_field2}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">documentsequenc:</span>
        <span class="ug-delete-detail-value">{{rowSelected.documentsequenc}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">recaptcha:</span>
        <span class="ug-delete-detail-value">{{rowSelected.recaptcha}}</span>
      </div>

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">recaptcha2:</span>
        <span class="ug-delete-detail-value">{{rowSelected.recaptcha2}}</span>
      </div>

 
    </div>

    <div class="modal-footer">
      <button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
      <button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
    </div>
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
  <h3 class="modal-title">Import File</h3>
  <div class="modal-body">
    <div class="ug-form-group">
      <label class="ug-form-label">Select CSV File</label>
      <input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
    </div>
  </div>
  <div class="modal-footer">
    <button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
    <button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
  </div>
</clr-modal>





















  <!-- htmlpopup -->
