

<div class="modal-header">
  <h5 class="modal-title d-flex align-items-center">
    File Browser &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="submit" aria-label="Left Align" 
      class="btn btn-outline-primary waves-effect waves-themed btn-sm ms-2" (click)="toggleSection()"
      ng-dblclick="return false">
      <i class="fal fa-openid" aria-hidden="true"></i> {{ isFileUpload ? 'Switch to Server Search' : 'Switch to File Upload' }}
    </button>
  </h5>
  
  <button type="button" class="close" (click)="closeModal()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
   <div class="mb-4">
    <!--File Filter Section -->
    <h5>File Filter</h5> 
    <input type="text" [(ngModel)]="fileFilter" placeholder="Enter file filter (e.g. *.xml)" style="width: 100%; padding: 5px; margin: 10px 0; border-radius: 5px; border: 1px solid #ccc;" id="fileFilter">
   <div class="border p-3 mb-4">
     <h6 class="d-flex justify-content-between align-items-center">
       Regex Pattern
       <button type="button" class="btn btn-link" (click)="toggleRegExPattern()">
         {{ isRegExPatternMinimized ? 'Expand' : 'Minimize' }}
       </button>
     </h6>
     <div *ngIf="!isRegExPatternMinimized">
        <div class="container my-4">
          <div class="row">
            <!-- ACE Editor Section -->
                  <div 
                    #searchTerm 
                    appAceEditor 
                    style="height: 200px; width: 100%; border: 1px solid #ced4da;">
                  </div>
          </div>
          <div class="row">     
            <!-- Regex Controls Section -->
            <div class="col-md-6">           
                  <!-- Regex Pattern Dropdown -->
                  <div class="mb-3">
                    <label for="regexPattern" class="form-label">Select Regex Pattern</label>
                    <select id="regexPattern" [(ngModel)]="selectedPattern" class="form-select">
                      <option *ngFor="let pattern of regexPatterns" [value]="pattern.pattern">
                        {{ pattern.pattern }}
                      </option>
                    </select>
                  </div>
        
                  <!-- Replacement Text Input -->
                  <div class="mb-3">
                    <label for="replacementText" class="form-label">Replacement Text</label>
                    <input
                      id="replacementText"
                      type="text"
                      placeholder="Enter replacement text"
                      [(ngModel)]="replacementText"
                      class="form-control"
                    />
                  </div>         
            </div>
          </div>
        </div>       
     </div>
   </div>
   <!-- Regex Pattern and Options -->
 <div class="border p-3 mb-4">  
   <h6 class="d-flex justify-content-between align-items-center">
     Regex Options
     <button type="button" class="btn btn-link" (click)="toggleRegExOptions()">
       {{ isRegExOptionsMinimized ? 'Expand' : 'Minimize' }}
     </button>
   </h6>

   <div *ngIf="!isRegExOptionsMinimized">     
     <div class="form-check d-flex flex-column">
       <div class="d-flex align-items-center">
         <input type="checkbox" [(ngModel)]="caseInsensitive"  class="form-check-input me-2" id="caseInsensitive">
         <label class="form-check-label" for="caseInsensitive">Case Insensitive</label>
       </div>
       <span class="form-text small" style="margin-left: 0.2rem;margin-top: 0.0rem;">Specifies case-insensitive matching</span>
     </div>

     <div class="form-check d-flex flex-column">
       <div class="d-flex align-items-center">
         <input type="checkbox" [(ngModel)]="singleLine" class="form-check-input me-2" id="singleLine">
         <label class="form-check-label" for="singleLine">Single Line</label>
       </div>
       <span class="form-text small" style="margin-left: 0.2rem;margin-top: 0.0rem;">Changes the meaning of the dot(.) so it matches every character, including \n</span>
     </div>
    
     <div class="form-check d-flex flex-column">
       <div class="d-flex align-items-center">
         <input type="checkbox" [(ngModel)]="multiLine" class="form-check-input me-2" id="multiLine">
         <label class="form-check-label" for="multiLine">Multi Line</label>
       </div>
       <span class="form-text small" style="margin-left: 0.2rem;margin-top: 0.0rem;">Changes the meaning of ^ and $ so they matches at the beginning and end, respectively, of any line, and not just the beginning and end of the entire string</span>
     </div>    

     <div class="form-check d-flex flex-column">
       <div class="d-flex align-items-center">
         <input type="checkbox" [(ngModel)]="ignoreWhitespace"  class="form-check-input me-2" id="ignoreWhitespace">
         <label class="form-check-label" for="ignoreWhitespace">Ignore Whitespace and Comments</label>
       </div>     
       <span class="form-text small" style="margin-left: 0.2rem;margin-top: 0.0rem;">Eliminate unescaped  white space from the pattern and enables comments marked with #</span>      
     </div>   
     
     <div class="form-check d-flex flex-column">
       <div class="d-flex align-items-center">
         <input type="checkbox" [(ngModel)]="explicitCapture"  class="form-check-input me-2" id="explicitCapture">
         <label class="form-check-label" for="explicitCapture">Explicit Capture</label>
       </div>     
       <span class="form-text small" style="margin-left: 0.2rem;margin-top: 0.0rem;">Specifies that the only valid captures are explicitly named or numbered groups</span>      
     </div>  

      
   </div>

 </div>    
 
<!-- Loader screen -->
<div *ngIf="isLoading" >
  <div  style="display: flex; justify-content: center;">
    <i class="fal fa-spinner fa-spin animated" style="color:#d73925; font-size: 30px;"></i>            
 </div>
</div>

 <div *ngIf="!isLoading">
 <div *ngIf="isFileUpload" @fadeAndScale class="border p-3 mb-4">
   <h6>File Upload</h6>
   <input type="file" (change)="onFileSelected($event)" webkitdirectory multiple class="form-control mb-3">  
 </div>
</div>

 <div *ngIf="!isLoading">
 <!-- Server Search Section -->
    <div *ngIf="!isFileUpload" @fadeAndScale  class="border p-3">
      <h6>Server path</h6>
      <input type="text"[(ngModel)]="directoryPath" id="directoryPath" placeholder="Enter server path" class="form-control mb-3" required>
    </div>
</div>
</div> 
<div class="modal-footer">  
  <button type="submit" aria-label="Left Align" 
  class="btn btn-outline-primary waves-effect waves-themed btn-sm"  (click)="closeModal()"
  ng-dblclick="return false">
  <i class="fal fa-openid" aria-hidden="true"></i> Close
  </button>

  <div *ngIf="!isLoading">
  <button [disabled]="!selectedPattern" type="submit" aria-label="Left Align" 
  class="btn btn-outline-primary waves-effect waves-themed btn-sm"  (click)="search(this.selectedPattern)"
  ng-dblclick="return false">
  <i class="fal fa-openid" aria-hidden="true"></i> Search
  </button>
</div>
 <div *ngIf="!isLoading">
    <button [disabled]="isContentEmpty()" type="submit" aria-label="Left Align" 
    class="btn btn-outline-primary waves-effect waves-themed btn-sm"  (click)="previewChanges(this.selectedPattern, replacementText)"
    ng-dblclick="return false">
    <i class="fal fa-openid" aria-hidden="true"></i> Preview
    </button>
  </div>
    <button *ngIf="isFileUpload" type="submit" aria-label="Left Align" 
    class="btn btn-outline-primary waves-effect waves-themed btn-sm"  (click)="submitSearch()"
    ng-dblclick="return false">
    <i class="fal fa-openid" aria-hidden="true"></i> Upload
    </button>
 

</div>
