<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://"> Student info</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">Student info</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]="'student_name'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      student Name
    </ng-container>
  </clr-dg-column>




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




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




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


 <clr-dg-column [clrDgField]="'password_field'"> <ng-container *clrDgHideableColumn="{hidden: false}">Password Field
						 </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]="'is_active'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      is active
    </ng-container>
  </clr-dg-column>




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






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




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




 <clr-dg-column [clrDgField]="'currency'">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      Currency
    </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.student_name }}</clr-dg-cell>


<clr-dg-cell (click)="goToReplaceStringaddress (user.address)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
</clr-dg-cell>


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


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


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


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


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


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




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


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


<clr-dg-cell>{{user.currency }}</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>student Name</span><strong>{{user.student_name}}</strong></div>


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


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


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


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


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


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


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


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


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


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


      <div class="ug-kv"><span>Currency</span><strong>{{user.currency}}</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)]="rsModaladdress" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
						  <div class="modal-body">
						    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
						  </div></clr-modal>





















<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Add Student info</h3>
  <div class="modal-body">
    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
<div class="form-row">
            <div class="form-col">
<div class="ug-form-group">
        <label for="student_name" class="ug-form-label">student Name<span class="required-field">*</span></label>
        <input type="text" id="student_name" class="ug-form-input" formControlName="student_name">
        <div *ngIf="submitted && entryForm.controls.student_name.errors" class="ug-form-error">
          <div *ngIf="submitted && entryForm.controls.student_name.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="address" class="ug-form-label">address</label>
              <textarea 
                id="address" 
                class="ug-form-input" 
                formControlName="address" 
                placeholder="Enter text" 
                rows="3"></textarea>
            </div>
</div>
            </div>


<div class="form-row">
            <div class="form-col">
 <div class="ug-form-group">
              <label for="phone_number" class="ug-form-label">Phone Number</label>
              <input type="text" id="phone_number" class="ug-form-input" formControlName="phone_number" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
              <div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="ug-form-error">
                <div *ngIf="submitted && entryForm.controls['phone_number'].hasError('pattern')">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
              </div>
            </div>
 </div>
            </div>


 <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="email_field" class="ug-form-label">Email Field</label>
              <input type="email" id="email_field" class="ug-form-input" formControlName="email_field" placeholder="Enter Email Field">
              <div *ngIf="entryForm.controls['email_field'].errors" class="ug-form-error">
                <div *ngIf="entryForm.controls['email_field'].hasError('pattern')" class="error_mess">* Email must be a valid email address</div>
              </div>
            </div>
          </div>
        </div>



        <!-- Password Fields -->
        <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="password_field" class="ug-form-label">Password Field</label>
              <div class="password-input-container">
                <input 
                  [type]="newaddpHidepassword_field ? 'password' : 'text'" 
                  id="password_field" 
                  class="ug-form-input password-input" 
                  formControlName="password_field" 
                  placeholder="Enter Password Field"
                  autocomplete="new-password">
                <button 
                  type="button" 
                  class="password-toggle" 
                  (click)="newaddChangerpassword_field()" 
                  [attr.aria-label]="newaddpHidepassword_field? 'Show password' : 'Hide password'">
                  <clr-icon [attr.shape]="newaddIconpassword_field"></clr-icon>
                </button>
              </div>
            </div>
          </div>
          
          <div class="form-col">
            <div class="ug-form-group">
              <label for="confirmpassword_field" class="ug-form-label">Confirm Password Field</label>
              <input 
                type="password" 
                id="confirmpassword_field" 
                class="ug-form-input" 
                formControlName="confirmpassword_field" 
                placeholder="Confirm password"
                autocomplete="new-password">
              <div *ngIf="entryForm.controls.confirmpassword_field.errors" class="ug-form-error">
                <div *ngIf="entryForm.controls.confirmpassword_field.errors.confirmedpassword_fieldValidator">* Password and Confirm Password must match.</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 class="ug-form-label">is active</label>
              <div class="clr-toggle-wrapper">
                <input type="checkbox" id="is_active" formControlName="is_active" clrToggle>
                <label for="is_active">is active</label>
              </div>
            </div>
          </div>
        </div>

<div class="clr-col-sm-12">
            <label>gender</label>
            <clr-radio-container clrInline style="margin-top: 0;"> 

 
   <clr-radio-wrapper>
                <input type="radio" clrRadio formControlName="gender" (change)="updategender('other')" [checked]="entryForm.get('gender').value === 'other'" />
                <label> other </label>
              </clr-radio-wrapper>     
 

 
   <clr-radio-wrapper>
                <input type="radio" clrRadio formControlName="gender" (change)="updategender('female')" [checked]="entryForm.get('gender').value === 'female'" />
                <label> female </label>
              </clr-radio-wrapper>     
 

 
   <clr-radio-wrapper>
                <input type="radio" clrRadio formControlName="gender" (change)="updategender('male')" [checked]="entryForm.get('gender').value === 'male'" />
                <label> male </label>
              </clr-radio-wrapper>     
 

    
 </clr-radio-container>
          </div> 






<div class="clr-col-sm-12">             
	 <label>distric</label>
							 <select formControlName="distric">
							    <option [value]="null">Select  distric </option> 
								
 
								<option> buldana </option>
								 

 
								<option> pune </option>
								 

						</select></div>

<!-- qrCode field start -->   
<div class="clr-col-sm-12">
	    <label>QRCode Field</label>
	    <input class="clr-input" type="text" formControlName="qrcode_field" />
	    <qrcode [qrdata]="entryForm.value.qrcode_field  ? entryForm.value.qrcode_field : '' " [width]="135" [errorCorrectionLevel]="'M'"  ></qrcode>   </div>
	<!-- qrCode field end -->

<!-- currency field start -->
      <div class="clr-col-sm-12">        
 <label> Currency</label>         
<input type="number"  class="clr-input"   formControlName="currency"  [value]="entryForm.value.currency | number:'1.2-2' | removeCommas">   
    </div> 
	      <!-- currency field end -->


      <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 Student info</h3>
  <div class="modal-body" *ngIf="rowSelected.id">
    



<div class="form-row">
            <div class="form-col">
              <div class="ug-form-group">
                <label for="student_name" class="ug-form-label">student Name<span class="required-field">*</span></label>
                <input type="text" id="student_name" class="ug-form-input" [(ngModel)]="rowSelected.student_name" name="student_name"
                  placeholder="Enter student Name">
              </div>
            </div>
          </div>


            <div class="form-col">
              <div class="ug-form-group">
                <label for="address" class="ug-form-label">address</label>
                <textarea id="address" class="ug-form-input" [(ngModel)]="rowSelected.address"
                  name="address" placeholder="Enter text" rows="3"></textarea>
              </div>
            </div>
           


 <!-- Phone Number Fields -->
          <div class="form-row">
            <div class="form-col">
              <div class="ug-form-group">
                <label for="phone_number" class="ug-form-label">Phone Number</label>
                <input type="text" id="phone_number" class="ug-form-input" [(ngModel)]="rowSelected.phone_number"
                  name="phone_number" placeholder="+91 Enter 10 digit Mobile Number"
                  pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
                <div *ngIf="rowSelected.phone_number && !isValidPhone_number(rowSelected.phone_number)"
                  class="ug-form-error">
                  * Please Follow your pattern,+91 Enter 10 digit Mobile Number.
                </div>
              </div>
            </div>
          </div>


 <div class="form-row">
          <div class="form-col">
            <div class="ug-form-group">
              <label for="email_field" class="ug-form-label">Email Field</label>
              <input type="email" id="email_field" class="ug-form-input" [(ngModel)]="rowSelected.email_field" name="email_field" placeholder="Enter email address">
              <div *ngIf="rowSelected.email_field && !isValidemail_field(rowSelected.email_field)" class="ug-form-error">
                * Email must be a valid email address.
              </div>
            </div>
          </div>
        </div>


          <!-- Password Fields -->
          <div class="form-row">
            <div class="form-col">
              <div class="ug-form-group">
                <label for="password_field" class="ug-form-label">Password Field</label>
                <div class="password-input-container">
                  <input [type]="newpHidepassword_field ? 'password' : 'text'" id="password_field"
                    class="ug-form-input password-input" [(ngModel)]="rowSelected.password_field" name="password_field"
                    placeholder="Enter Password Field">
                  <button type="button" class="password-toggle" (click)="newShapeChangerpassword_field()"
                    [attr.aria-label]="newpHidepassword_field ? 'Show password' : 'Hide password'">
                    <clr-icon [attr.shape]="newIconpassword_field"></clr-icon>
                  </button>
                </div>
              </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>


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

 <div class="clr-col-sm-12">            
            <label> gender</label>             
           <clr-radio-container clrInline style="margin-top: 0;">
               
 
               <clr-radio-wrapper>
                                 <input type="radio" clrRadio  (change)="updategenderEdit('other')" [checked]="rowSelected.gender  === 'other'" />
                                 <label>other</label>
                               </clr-radio-wrapper>
                

 
               <clr-radio-wrapper>
                                 <input type="radio" clrRadio  (change)="updategenderEdit('female')" [checked]="rowSelected.gender  === 'female'" />
                                 <label>female</label>
                               </clr-radio-wrapper>
                

 
               <clr-radio-wrapper>
                                 <input type="radio" clrRadio  (change)="updategenderEdit('male')" [checked]="rowSelected.gender  === 'male'" />
                                 <label>male</label>
                               </clr-radio-wrapper>
                

               </clr-radio-container>           </div>



<div class="clr-col-sm-12">
 <label> distric</label> 
<select name="distric" [(ngModel)]="rowSelected.distric">
    <option [value]="null">Selectdistric
    </option>


    
 

    <option> buldana </option>
     

 

    <option> pune </option>
     


  </select> </div>

<!-- qrCode field start -->
<div class="clr-col-sm-12">
  <label> QRCode Field</label>
  <input class="clr-input" type="text" name="qrcode_field" [(ngModel)]="rowSelected.qrcode_field" />
  <qrcode [qrdata]="rowSelected.qrcode_field  ? rowSelected.qrcode_field : '' " [width]="135" [errorCorrectionLevel]="'M'"></qrcode>
</div>
<!-- qrCode field end -->

<!-- currency field start -->
<div class="clr-col-sm-12">
  <label> Currency</label>
  <input type="number" class="clr-input" [(ngModel)]="rowSelected.currency" name="currency" (blur)="formatCurrencycurrency()" [value]="rowSelected.currency  | removeCommas">
</div>
<!-- currency field end -->


    <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">student Name:</span>
        <span class="ug-delete-detail-value">{{rowSelected.student_name}}</span>
      </div>

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

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

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

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Password Field:</span>
        <span class="ug-delete-detail-value">{{rowSelected.password_field}}</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">is active:</span>
        <span class="ug-delete-detail-value">{{rowSelected.is_active}}</span>
      </div>

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

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

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

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

<div class="ug-delete-detail-item">
        <span class="ug-delete-detail-label">Currency:</span>
        <span class="ug-delete-detail-value">{{rowSelected.currency}}</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 -->
