<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://"> Data lake</a></li>
</ol>
<div class="dg-wrapper">
  <div class="clr-row">
    <div class="clr-col-8">
      <h3>Data lake </h3>
    </div>
    <div class="clr-col-4" style="text-align: right;">
      <button *ngIf="cardButton" id="add" class="btn btn-primary btn-icon" (click)="changeView()">
        <clr-icon *ngIf="!isCardview" shape="grid-view"></clr-icon> <clr-icon *ngIf="isCardview"
          shape="bars"></clr-icon>
      </button>
      <!-- button -->
      <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
        <clr-icon shape="plus"></clr-icon>ADD
      </button>
    </div>
  </div>
  <ng-container *ngIf="!isCardview"> <!-- GET ALL -->
    <div style="overflow-x: auto;">
      <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected" style="width: max-content; min-width: 100%;">
        <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]="'name'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Name
          </ng-container></clr-dg-column>


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

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

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


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


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

        <!-- Add groupby_json column -->
        <clr-dg-column [clrDgField]="'groupby_json'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Group By JSON
          </ng-container></clr-dg-column>



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

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

        <!-- Add ref_datalake_id column -->
        <clr-dg-column [clrDgField]="'ref_datalake_id'"> <ng-container *clrDgHideableColumn="{hidden: false}">
            Reference Data Lake
          </ng-container></clr-dg-column>

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

        <!-- Webhook Status Column -->
        <clr-dg-column>
          <ng-container *clrDgHideableColumn="{hidden: false}">
            Webhook Status
          </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 product" [clrDgItem]="user">

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


          <clr-dg-cell>
            <div style="display: flex; align-items: center; max-width: 200px;">
              <span
                style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
                title="{{user.url}}" (click)="showFullUrl(user.url)">
                {{user.url | slice:0:30}}{{user.url.length > 30 ? '...' : ''}}
              </span>
              <button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url)" title="Copy URL">
                <clr-icon shape="copy-to-clipboard"></clr-icon>
              </button>
            </div>
          </clr-dg-cell>


          <clr-dg-cell>
            <div style="display: flex; align-items: center; max-width: 200px;">
              <span
                style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
                title="{{user.url_endpoint}}" (click)="showFullUrl(user.url_endpoint)">
                {{user.url | slice:0:30}}{{user?.url_endpoint?.length > 30 ? '...' : ''}}
              </span>
              <button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url_endpoint)" title="Copy URL">
                <clr-icon shape="copy-to-clipboard"></clr-icon>
              </button>
            </div>
          </clr-dg-cell>

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


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


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

          <!-- Add groupby_json cell -->
          <clr-dg-cell (click)="goToReplaceStringjson(user.groupby_json)"
            style="cursor: pointer; align-items: center;"><clr-icon shape="details"
              *ngIf="user.groupby_json"></clr-icon></clr-dg-cell>


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

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

          <!-- Add ref_datalake_id cell -->
          <clr-dg-cell>{{user.ref_datalake_name}}</clr-dg-cell>

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

          <!-- Webhook Status Cell -->
          <clr-dg-cell>
            <span *ngIf="user.webhook_url && user.webhook_url.trim() !== ''" class="webhook-enabled">Enabled</span>
            <span *ngIf="!user.webhook_url || user.webhook_url.trim() === ''" class="webhook-disabled">Disabled</span>
          </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>

            <!-- New JSON Update button -->
            <button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
              <clr-icon shape="refresh"></clr-icon>
            </button>

            <!-- Calculated Field button -->
            <button class="btn btn-icon" (click)="fetchAvailableKeys(user)" title="Create Calculated Field">
              <clr-icon shape="calculator"></clr-icon>
            </button>

            <!-- Group By button -->
            <button class="btn btn-icon" (click)="openGroupByModal(user)" title="Group By Configuration">
              <clr-icon shape="group"></clr-icon>
            </button>

            <!-- Blending Keys button (only shown for blending type with non-empty blending_lakeids) -->
            <button class="btn btn-icon" (click)="fetchBlendingKeys(user)" title="Configure Blending Query"
              *ngIf="canShowBlendingAction(user)">
              <clr-icon shape="code"></clr-icon>
            </button>

            <!-- Field Mapping button -->
            <button class="btn btn-icon" (click)="openFieldMappingModal(user)" title="Field Mapping"
              *ngIf="user.url && user.sure_connect_id">
              <clr-icon shape="map"></clr-icon>
            </button>

            <!-- Scheduler button -->
            <button class="btn btn-icon" (click)="openSchedulerModal(user)" title="Scheduler">
              <clr-icon shape="clock"></clr-icon>
            </button>

            <!-- Webhook toggle button -->
            <button class="btn btn-icon" (click)="toggleWebhook(user)" title="Toggle Webhook">
              <clr-icon shape="network-globe"></clr-icon>
            </button>

            <!-- Copy Webhook URL button -->
            <button class="btn btn-icon" (click)="copyWebhookUrl(user.webhook_url)" title="Copy Webhook URL"
              *ngIf="user.webhook_url && user.webhook_url.trim() !== ''">
              <clr-icon shape="copy-to-clipboard"></clr-icon>
            </button>
          </clr-dg-cell>

          <!-- who colmn -->

          <!-- <clr-dg-cell>
    <button class="btn btn-icon" (click)="onEdit(user)">
      <clr-icon shape="pencil"></clr-icon>
    </button>
    <button class="btn btn-icon" (click)="onDelete(user)">
      <clr-icon shape="trash"></clr-icon>
    </button>
    
  </clr-dg-cell> -->

          <clr-dg-action-overflow>
            <button class="action-item" (click)="onEdit(user)">Edit</button>
            <button class="action-item" (click)="onDelete(user)">Delete</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]">Users per page</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            of {{pagination.totalItems}} users
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </ng-container>
  <ng-template #showInfo>
    <div class="alert alert-info" role="alert">
      <div class="alert-items">
        <div class="alert-item static">
          <span class="alert-text">
            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
            Data could be found. Loading..
            <clr-spinner [clrMedium]="true">Loading ...</clr-spinner>
          </span>
        </div>
      </div>
    </div>
  </ng-template>

  <ng-container *ngIf="isCardview">
    <div *ngIf="product; else showInfo" class="clr-row clr-align-items-start clr-justify-content-start">
      <div *ngFor="let app of product| filter:search; let index = i" class="clr-col-auto">
        <div class="clr-row">
          <div class="clr-col-lg-12 clr-col-md-4 clr-col-sm-4 clr-col-12" style="width: 410px;">
            <div class="card" style="padding: 10px; "
              [style.background-color]="cardmodal.cardColor !== '' ? cardmodal.cardColor : 'white'">
              <div class="card-body"
                style="display: grid; grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(7, 1fr); gap: 5px;">
                <ng-container *ngFor="let item of dashboardArray">
                  <div [style.gridColumn]="item.x + 1" [style.gridRow]="item.y + 1"
                    [style.gridColumnEnd]="item.x + item.cols + 1" [style.gridRowEnd]="item.y + item.rows + 1">
                    <div *ngIf="item.name === 'textField'" class="title-card card-title"
                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
                      {{beforeText(item.fieldtext)}}
                      {{ app[transform(item.fieldtext) ] }}
                      {{afterText(item.fieldtext)}}
                    </div>

                    <div *ngIf="item.name === 'dateField'" class="title-card card-title"
                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
                      {{beforeText(item.fieldtext)}}
                      {{ app[transform(item.fieldtext) ] | date}}
                      {{afterText(item.fieldtext)}}
                    </div>
                    <div *ngIf="item.name === 'numberField'" class="title-card card-title"
                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
                      {{beforeText(item.fieldtext)}}
                      {{ app[transform(item.fieldtext) ]}}
                      {{afterText(item.fieldtext)}}
                    </div>


                    <div *ngIf="item.name === 'Line'" class="title-card card-title"
                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
                      <hr>
                    </div>

                    <div *ngIf="item.name === 'Icon'" class="icon-card"
                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
                      <clr-icon [attr.shape]="item.iconName"></clr-icon>
                    </div>

                    <div *ngIf="item.name == 'Image'"
                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
                      <img id="filePreview" [src]="item.imageURL" alt="File Preview"
                        [style.width]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"
                        [style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'">
                    </div>
                  </div>
                </ng-container>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
</div>


<clr-modal [(clrModalOpen)]="rsModaljson" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
  <div class="modal-body">
    <!-- Grid view above JSON -->
    <div *ngIf="isJsonData(rowSelected)" class="json-grid-view" style="margin-bottom: 20px;">
      <h4>JSON Data Grid View</h4>
      <div style="overflow-x: auto; max-height: 300px; overflow-y: auto;">
        <clr-datagrid style="width: max-content; min-width: 100%;">
          <!-- Generate columns dynamically based on JSON keys -->
          <clr-dg-column *ngFor="let header of getJsonHeaders(rowSelected)" style="min-width: 150px;">
            <ng-container *clrDgHideableColumn="{hidden: false}">
              {{header}}
            </ng-container>
          </clr-dg-column>

          <!-- Generate rows dynamically from JSON data -->
          <clr-dg-row *ngFor="let item of getJsonData(rowSelected); let i = index" [clrDgItem]="item">
            <clr-dg-cell *ngFor="let header of getJsonHeaders(rowSelected)" style="min-width: 150px;">
              <span [title]="item[header]"
                style="display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                {{item[header]}}
              </span>
            </clr-dg-cell>
          </clr-dg-row>

          <clr-dg-footer>
            <clr-dg-pagination #jsonPagination [clrDgPageSize]="5">
              <clr-dg-page-size [clrPageSizeOptions]="[5, 10, 20]">Items per page</clr-dg-page-size>
              {{jsonPagination.firstItem + 1}} - {{jsonPagination.lastItem + 1}}
              of {{getJsonData(rowSelected).length}} items
            </clr-dg-pagination>
          </clr-dg-footer>
        </clr-datagrid>
      </div>
    </div>

    <!-- JSON view below grid -->
    <textarea class="form-control" style="width:100%; height: 200px;" readonly>{{rowSelected}}</textarea>
  </div>
</clr-modal>



<!-- //		EDIT DATA......... -->
<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Update Data lake
    <!--update button -->

  </h3>
  <div class="modal-body" *ngIf="rowSelected.id">
    <h2 class="heading">{{rowSelected.id}}</h2>
    <!-- button -->
    <form>
      <div class="clr-row">
        <div class="clr-col-sm-12">
          <label>Name</label>
          <input class="clr-input" type="text" [(ngModel)]="rowSelected.name" name="name" />
        </div>

        <div class="clr-col-sm-12">
          <label> Url</label>
          <input type="url" name="url" [(ngModel)]="rowSelected.url" placeholder="Enter URL" class="clr-input"
            pattern="https?://.+">
          <div *ngIf="!isValidurl(rowSelected.url )" class="error_mess"> * Please enter a valid URL. </div>
        </div>

        <div class="clr-col-sm-12">
          <label>schedule</label>
          <input class="clr-input" type="text" [(ngModel)]="rowSelected.schedule" name="schedule" />
        </div>

        <div class="clr-col-sm-12">
          <label>cron job</label>
          <input class="clr-input" type="text" [(ngModel)]="rowSelected.cron_job" name="cron_job" />
          <app-cron-job-builder [cronExpression]="editCronExpression"
            (cronExpressionChange)="onEditCronExpressionChange($event)"
            instanceId="edit-form-{{rowSelected.id}}"></app-cron-job-builder>
        </div>

        <!-- <div class="clr-col-sm-12">
          <label> json</label>
          <input id="name" type="Text" class="form-control" style="border: none; outline: none; height:33px !important;"
            [(ngModel)]="rowSelected.json" name=" json " />
        </div>

        <div class="clr-col-sm-12">
          <label>Url Endpoint</label>
          <input class="clr-input" type="text" [(ngModel)]="rowSelected.url_endpoint" name="url_endpoint" />
        </div> -->

        <div class="clr-col-sm-12">
          <label>Batch Volume</label>
          <input class="clr-input" type="number" [(ngModel)]="rowSelected.batch_volume" name="batch_volume" />
        </div>

        <div class="clr-col-sm-12">
          <label>SureConnect</label>
          <select class="clr-input" [(ngModel)]="rowSelected.sure_connect_id" name="sure_connect_id">
            <option value="">Select SureConnect</option>
            <option *ngFor="let sureConnect of sureConnectList" [value]="sureConnect.id">{{sureConnect.connection_name}}
            </option>
          </select>
        </div>

        <!-- Data Lake Type -->
        <div class="clr-col-sm-12">
          <label>Data Lake Type</label>
          <select class="clr-input" [(ngModel)]="rowSelected.datalake_type" name="datalake_type">
            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
          </select>
        </div>

        <!-- Blending Data Lakes (only show when blending type is selected) -->
        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
          <label>Blending Data Lakes</label>
          <div class="checkbox-container">
            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
              <input type="checkbox" [value]="dataLake.id"
                (change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
                [checked]="isEditBlendingLakeSelected(dataLake.id)">
              <label>{{ dataLake.name }}</label>
            </div>
          </div>
          <small class="clr-subtext">Select data lakes to blend</small>
        </div>

        <!-- Reference Data Lake (only show when normal type is selected) -->
        <div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'normal'">
          <label>Reference Data Lake</label>
          <select class="clr-input" [(ngModel)]="rowSelected.ref_datalake_id" name="ref_datalake_id">
            <option value="">Select Data Lake</option>
            <option *ngFor="let dataLake of dataLakeList" [value]="dataLake.id">{{dataLake.name}}
            </option>
          </select>
        </div>
      </div>
      <!-- form code start -->
      <div *ngIf="checkFormCode">
        <h4 style="font-weight: 300;display: inline;">Extension</h4>
        <br>
        <hr>
        <div class="clr-row">
          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
              <input *ngSwitchCase="'text'" [type]="field.fieldType" name="{{ field.extValue }}"
                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />

              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
              <input *ngSwitchCase="'date'" [type]="field.fieldType" name="{{ field.extValue }}"
                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />

              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
              <textarea *ngSwitchCase="'textarea'" name="{{ field.extValue }}" [(ngModel)]="rowSelected[field.extValue]"
                col="10" row="2"></textarea>

              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" name="{{ field.extValue }}"
                [(ngModel)]="rowSelected[field.extValue]" class="clr-checkbox" />
            </ng-container>
          </div>
        </div>
      </div>

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

<!-- DELETE FORM ..... -->

<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="button" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
    </div>
  </div>
</clr-modal>

<!-- ADD FORM ..... -->
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Add Data lake

    <!-- aeroplane icon -->
    &nbsp; &nbsp; &nbsp; &nbsp;
    <a *ngIf="userrole?.includes('ADMIN')" style="float: right;" href="javascript:void(0)" role="tooltip"
      aria-haspopup="true" class="tooltip tooltip-sm tooltip-bottom-left">
      <a id="build_extension" [routerLink]="['../extension/all']" [queryParams]="{ formCode: 'Data_lake_formCode' }">
        <clr-icon shape="airplane" size="32"></clr-icon>
      </a>
      <span class="tooltip-content">Form Extension</span>
    </a>
  </h3>
  <div class="modal-body">
    <form [formGroup]="entryForm">
      <div class="clr-row" style="height: fit-content;">

        <div class="clr-col-sm-12">
          <label> Name</label>
          <input class="clr-input" type="text" formControlName="name" />
        </div>

        <div class="clr-col-sm-12">
          <label> Url </label>
          <input type="url" formControlName="url" class="clr-input" pattern="https?://.+">
          <div *ngIf="entryForm.controls['url'].errors" class="error_mess">
            <div *ngIf="entryForm.controls['url'].hasError('pattern')" class="error_mess"> * Please enter a valid URL.
            </div>
          </div>
        </div>

        <div class="clr-col-sm-12">
          <label> schedule</label>
          <input class="clr-input" type="text" formControlName="schedule" />
        </div>

        <div class="clr-col-sm-12">
          <label> cron job</label>
          <input class="clr-input" type="text" formControlName="cron_job" />
          <app-cron-job-builder [cronExpression]="addCronExpression"
            (cronExpressionChange)="onAddCronExpressionChange($event)" instanceId="add-form"></app-cron-job-builder>
        </div>

        <!-- <div class="clr-col-sm-12">
          <label>json</label>
          <input class="form-control" type="Text" formControlName="json"
            style="border: none; outline: none; height:33px !important;" />
        </div> -->

        <!-- <div class="clr-col-sm-12">
          <label> Url Endpoint</label>
          <input class="clr-input" type="text" formControlName="url_endpoint" />
        </div> -->

        <div class="clr-col-sm-12">
          <label> Batch Volume</label>
          <input class="clr-input" type="number" formControlName="batch_volume" />
        </div>

        <div class="clr-col-sm-12">
          <label>SureConnect</label>
          <select formControlName="sure_connect_id">
            <option value="">Select SureConnect</option>
            <option *ngFor="let sureConnect of sureConnectList" [value]="sureConnect.id">{{sureConnect.connection_name}}
            </option>
          </select>
        </div>

        <!-- Data Lake Type -->
        <div class="clr-col-sm-12">
          <label>Data Lake Type</label>
          <select formControlName="datalake_type">
            <option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
          </select>
        </div>

        <!-- Blending Data Lakes (only show when blending type is selected) -->
        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
          <label>Blending Data Lakes</label>
          <div class="checkbox-container">
            <div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
              <input type="checkbox" [value]="dataLake.id" (change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
                [checked]="isBlendingLakeSelected(dataLake.id)">
              <label>{{ dataLake.name }}</label>
            </div>
          </div>
          <small class="clr-subtext">Select data lakes to blend</small>
        </div>

        <!-- Reference Data Lake (only show when normal type is selected) -->
        <div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'normal'">
          <label>Reference Data Lake</label>
          <select formControlName="ref_datalake_id">
            <option value="">Select Data Lake</option>
            <option *ngFor="let dataLake of dataLakeList" [value]="dataLake.id">{{dataLake.name}}
            </option>
          </select>
        </div>
      </div>


      <!-- form code start -->
      <div *ngIf="checkFormCode">
        <h4 style="font-weight: 300;display: inline;">Extension</h4>
        <br>
        <hr>
        <div class="clr-row">
          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
              <input *ngSwitchCase="'text'" [type]="field.fieldType" [formControlName]="field.extValue"
                class="clr-input" />
              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
              <input *ngSwitchCase="'date'" [type]="field.fieldType" [formControlName]="field.extValue"
                class="clr-input" />
              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
              <textarea *ngSwitchCase="'textarea'" [formControlName]="field.extValue" col="10" row="2"></textarea>
              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" [formControlName]="field.extValue"
                class="clr-checkbox" />
            </ng-container>
          </div>
        </div>
      </div>
      <!-- form code end -->
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()">ADD</button>
      </div>
    </form>
  </div>
</clr-modal>

<!-- Calculated Field Modal -->
<clr-modal [(clrModalOpen)]="calculatedFieldModalOpen" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Create Calculated Field</h3>
  <div class="modal-body">
    <form [formGroup]="calculatedFieldForm">
      <div class="clr-row">
        <div class="clr-col-12 calculated-section">
          <h4 class="section-title">
            <clr-icon shape="key" class="section-icon"></clr-icon>
            Available Keys from API
          </h4>
          <div class="field-container">
            <span *ngFor="let key of availableKeys" class="field-tag" (click)="addFieldToEquation(key)">
              <clr-icon shape="data-field" class="field-icon"></clr-icon>
              {{ key }}
            </span>
          </div>
        </div>

        <div class="clr-col-12 calculated-section">
          <label class="field-label">Calculated Field Name</label>
          <input class="clr-input field-input" type="text" formControlName="fieldName" placeholder="Enter field name" />
        </div>

        <div class="clr-col-12 calculated-section">
          <label class="field-label">Operation</label>
          <select class="field-input" formControlName="operation">
            <option value="">Select Operation</option>
            <option value="add">Addition (+)</option>
            <option value="subtract">Subtraction (-)</option>
            <option value="multiply">Multiplication (*)</option>
            <option value="divide">Division (/)</option>
            <option value="percentage">Percentage (%)</option>
            <option value="concat">Concatenation (||)</option>
            <option value="complex">Complex Equation</option>
          </select>
        </div>

        <!-- Complex Equation Section -->
        <div class="clr-col-12 calculated-section" *ngIf="calculatedFieldForm.get('operation')?.value === 'complex'">
          <label class="field-label">Complex Equation</label>
          <textarea class="clr-textarea equation-input" formControlName="complexEquation"
            placeholder="Enter complex equation using actual field names" rows="3"></textarea>
          <small class="clr-subtext equation-hint">
            Use actual field names from the available keys list above, or predefined constants (constant_X).
            Example: (field1 + field2) * constant_1 - (field3 / field4)
          </small>

          <!-- Available Operators -->
          <div class="operators-container">
            <h5 class="subsection-title">
              <clr-icon shape="calculator" class="subsection-icon"></clr-icon>
              Available Operators
            </h5>
            <div class="operator-tags">
              <span class="operator-tag" (click)="addOperatorToEquation('+')">+</span>
              <span class="operator-tag" (click)="addOperatorToEquation('-')">-</span>
              <span class="operator-tag" (click)="addOperatorToEquation('*')">×</span>
              <span class="operator-tag" (click)="addOperatorToEquation('/')">÷</span>
              <span class="operator-tag" (click)="addOperatorToEquation('(')">(</span>
              <span class="operator-tag" (click)="addOperatorToEquation(')')">)</span>
              <span class="operator-tag" (click)="addOperatorToEquation('[')">[</span>
              <span class="operator-tag" (click)="addOperatorToEquation(']')">]</span>
              <!-- <span class="operator-tag" (click)="addOperatorToEquation('{')">{</span>
              <span class="operator-tag" (click)="addOperatorToEquation('}')">}</span> -->
              <span class="operator-tag" (click)="addOperatorToEquation('^')">^</span>
              <span class="operator-tag" (click)="addOperatorToEquation('%')">%</span>
              <span class="operator-tag" (click)="addOperatorToEquation('=')">=</span>
              <span class="operator-tag" (click)="addOperatorToEquation('>')">&gt;</span>
              <span class="operator-tag" (click)="addOperatorToEquation('<')">&lt;</span>
              <span class="operator-tag" (click)="addOperatorToEquation('>=')">&gt;=</span>
              <span class="operator-tag" (click)="addOperatorToEquation('<=')">&lt;=</span>
              <span class="operator-tag" (click)="addOperatorToEquation('!=')">!=</span>
              <span class="operator-tag" (click)="addOperatorToEquation('&&')">&&</span>
              <span class="operator-tag" (click)="addOperatorToEquation('||')">||</span>
            </div>
          </div>

          <!-- Available Fields -->
          <div class="fields-container">
            <h5 class="subsection-title">
              <clr-icon shape="data-field" class="subsection-icon"></clr-icon>
              Available Fields
            </h5>
            <div class="field-tags">
              <span *ngFor="let key of availableKeys" class="field-tag" (click)="addFieldToEquation(key)">
                <clr-icon shape="data-field" class="field-icon"></clr-icon>
                {{ key }}
              </span>
            </div>
          </div>

          <!-- Defined Constants -->
          <div class="constants-container" *ngIf="getDefinedConstants().length > 0">
            <h5 class="subsection-title">
              <clr-icon shape="pin" class="subsection-icon"></clr-icon>
              Defined Constants
            </h5>
            <div class="constant-tags">
              <span *ngFor="let constant of getDefinedConstants()" class="constant-tag"
                (click)="addFieldToEquation(constant)">
                <clr-icon shape="pin" class="constant-icon"></clr-icon>
                {{ constant }}
              </span>
            </div>
          </div>

          <!-- Add New Constant -->
          <div class="new-constant-container">
            <button class="btn btn-sm btn-secondary add-constant-btn" (click)="addNewConstantToEquation()">
              <clr-icon shape="plus"></clr-icon> Add New Constant
            </button>
          </div>
        </div>

        <!-- Multiple Fields Section -->
        <div class="clr-col-12 calculated-section"
          *ngIf="calculatedFieldForm.get('operation')?.value && calculatedFieldForm.get('operation')?.value !== 'complex'">
          <label class="field-label">Fields and Constants</label>
          <div class="field-components-container">
            <div formArrayName="fieldComponents">
              <div *ngFor="let fieldComponent of getFieldComponents().controls; let i = index" [formGroupName]="i"
                class="field-component-row">
                <div class="field-select-container">
                  <select class="field-select" formControlName="field">
                    <option value="">Select Field</option>
                    <option *ngFor="let key of availableKeys" [value]="key">{{ key }}</option>
                  </select>
                </div>
                <div class="constant-input-container">
                  <input type="text" class="constant-input" formControlName="constant"
                    placeholder="Or enter constant value" />
                </div>
                <div class="remove-btn-container">
                  <button type="button" class="btn btn-icon btn-danger remove-field-btn"
                    (click)="removeFieldComponent(i)" *ngIf="getFieldComponents().length > 1">
                    <clr-icon shape="trash"></clr-icon>
                  </button>
                </div>
              </div>
            </div>
            <button type="button" class="btn btn-sm add-field-btn" (click)="addFieldComponent()">
              <clr-icon shape="plus"></clr-icon> Add Field/Constant
            </button>
          </div>
        </div>
      </div>
    </form>

    <div class="clr-row created-fields-section">
      <div class="clr-col-12">
        <h4 class="section-title">
          <clr-icon shape="list" class="section-icon"></clr-icon>
          Created Calculated Fields
        </h4>
        <div class="table-container">
          <table class="table calculated-fields-table">
            <thead>
              <tr>
                <th>Field Name</th>
                <th>Operation</th>
                <th>Fields/Values</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let field of calculatedFields">
                <td class="field-name-cell">{{ field.fieldName }}</td>
                <td class="operation-cell">{{ field.operation }}</td>
                <td class="expression-cell">
                  <span *ngIf="field.operation === 'complex'">{{ field.complexEquation }}</span>
                  <span *ngIf="field.operation !== 'complex' && field.type !== 'groupby'">
                    <span *ngFor="let component of field.fieldComponents; let last = last">
                      <span *ngIf="component.field && !component.isConstant">{{ component.field }}</span>
                      <span *ngIf="component.isConstant">"{{ component.constant }}"</span>
                      <span *ngIf="!component.field && component.constant">"{{ component.constant }}"</span>
                      <span *ngIf="!last"> {{ getOperationSymbol(field.operation) }} </span>
                    </span>
                  </span>
                  <span *ngIf="field.type === 'groupby'">
                    GROUP BY: {{ field.groupFields.join(', ') }}
                    <div *ngIf="field.aggregations && field.aggregations.length > 0">
                      <small>
                        <div *ngFor="let agg of field.aggregations">
                          {{ agg.operation.toUpperCase() }}({{ agg.field }})
                        </div>
                      </small>
                    </div>
                  </span>
                </td>
                <td>
                  <button class="btn btn-icon btn-danger" (click)="deleteCalculatedField(field.id)"
                    *ngIf="field.type !== 'groupby'">
                    <clr-icon shape="trash"></clr-icon>
                  </button>
                  <button class="btn btn-icon btn-danger" (click)="removeGroupByConfig(field.id)"
                    *ngIf="field.type === 'groupby'">
                    <clr-icon shape="trash"></clr-icon>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="calculatedFieldModalOpen = false">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="addCalculatedField()">Add Field</button>
    <button type="button" class="btn btn-success" (click)="updateCalculatedFields()"
      [disabled]="calculatedFields.length === 0">
      Update Record
    </button>
  </div>
</clr-modal>

<!-- Constant Value Modal -->
<clr-modal [(clrModalOpen)]="constantValueModalOpen" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Define Constant Value</h3>
  <div class="modal-body">
    <div class="clr-row">
      <div class="clr-col-12">
        <p>Enter a value for constant: <strong>{{ currentConstantName }}</strong></p>
      </div>
      <div class="clr-col-12">
        <label>Constant Value</label>
        <input class="clr-input" type="text" [(ngModel)]="currentConstantValue" placeholder="Enter constant value" />
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="cancelConstantValue()">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="saveConstantValue()">Save</button>
  </div>
</clr-modal>

<!-- Group By Modal -->
<clr-modal [(clrModalOpen)]="showGroupByModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Group By Configuration</h3>
  <div class="modal-body">
    <div class="clr-row">
      <div class="clr-col-12">
        <h4>Group By Fields</h4>
        <div class="field-container">
          <span *ngFor="let key of availableKeys" class="field-tag" [class.selected]="isGroupByFieldSelected(key)"
            (click)="isGroupByFieldSelected(key) ? removeGroupByField(key) : addGroupByField(key)">
            {{ key }}
          </span>
        </div>
      </div>

      <div class="clr-col-12" style="margin-top: 20px;">
        <h4>Selected Group By Fields</h4>
        <div class="selected-fields-container">
          <span *ngFor="let field of selectedGroupByFields" class="selected-field-tag">
            {{ field }}
            <button class="btn btn-icon btn-sm" (click)="removeGroupByField(field)">
              <clr-icon shape="times"></clr-icon>
            </button>
          </span>
          <div *ngIf="selectedGroupByFields.length === 0" class="no-selection">
            No fields selected for grouping
          </div>
        </div>
      </div>

      <div class="clr-col-12" style="margin-top: 20px;">
        <h4>Aggregation Operations</h4>
        <div class="aggregation-container">
          <div *ngFor="let agg of selectedAggregationFields; let i = index" class="aggregation-row">
            <div class="clr-row">
              <div class="clr-col-5">
                <label>Field</label>
                <select class="clr-select" [(ngModel)]="agg.field">
                  <option value="">Select Field</option>
                  <option *ngFor="let key of availableKeys" [value]="key">{{ key }}</option>
                </select>
              </div>
              <div class="clr-col-5">
                <label>Operation</label>
                <select class="clr-select" [(ngModel)]="agg.operation">
                  <option *ngFor="let op of aggregationOperations" [value]="op.value">{{ op.label }}</option>
                </select>
              </div>
              <div class="clr-col-2">
                <button class="btn btn-icon btn-danger" (click)="removeAggregationField(i)" style="margin-top: 20px;">
                  <clr-icon shape="trash"></clr-icon>
                </button>
              </div>
            </div>
          </div>

          <button class="btn btn-sm" (click)="addAggregationField()" style="margin-top: 10px;">
            <clr-icon shape="plus"></clr-icon> Add Aggregation
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="showGroupByModal = false">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="applyGroupBy()"
      [disabled]="selectedGroupByFields.length === 0">
      Apply Group By
    </button>
  </div>
</clr-modal>

<!-- Blending Keys Panel -->
<div class="blending-keys-panel" *ngIf="showBlendingKeys">
  <div class="panel-header">
    <h3>Blending Configuration</h3>
    <button class="btn btn-icon" (click)="closeBlendingKeys()" title="Close">
      <clr-icon shape="close"></clr-icon>
    </button>
  </div>

  <div class="panel-content">
    <!-- Display keys for each blending lake -->
    <div class="keys-container" *ngFor="let keyData of blendingKeysData">
      <h4>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h4>
      <div class="headers-container">
        <span class="header-tag" *ngFor="let header of keyData.headers">{{ header }}</span>
      </div>
    </div>

    <!-- SQL Query Editor -->
    <div class="sql-editor-container">
      <h4>SQL Query Builder</h4>
      <textarea class="clr-textarea sql-textarea" [(ngModel)]="sqlQueryText"
        placeholder="Enter your SQL query here using the available headers..." rows="6"></textarea>
      <div class="editor-actions">
        <button class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
      </div>
    </div>
  </div>
</div>

<!-- Blending Configuration Modal -->
<clr-modal [(clrModalOpen)]="showBlendingKeys" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Blending Configuration</h3>
  <div class="modal-body">
    <div class="blending-config-container">
      <!-- Display keys for each blending lake -->
      <div class="keys-section" *ngIf="blendingKeysData && blendingKeysData.length > 0">
        <h4 class="section-title">
          <clr-icon shape="data-field" class="section-icon"></clr-icon>
          Available Data Sources
        </h4>
        <div class="keys-container">
          <div class="key-card" *ngFor="let keyData of blendingKeysData">
            <div class="key-header">
              <h5>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h5>
            </div>
            <div class="headers-container">
              <span class="header-tag" *ngFor="let header of keyData.headers" (click)="insertHeaderIntoQuery(header)">
                {{ header }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- SQL Query Editor -->
      <div class="sql-editor-section">
        <h4 class="section-title">
          <clr-icon shape="code" class="section-icon"></clr-icon>
          SQL Query Builder
        </h4>
        <div class="sql-editor-container">
          <textarea class="clr-textarea sql-textarea" [(ngModel)]="sqlQueryText"
            placeholder="Enter your SQL query here using the available headers. Click on header names above to insert them into your query."
            rows="8"></textarea>
          <div class="editor-hint">
            <small class="clr-subtext">Tip: Click on header names above to automatically insert them into your
              query</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="closeBlendingKeys()">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
  </div>
</clr-modal>

<!-- Field Mapping Modal -->
<clr-modal [(clrModalOpen)]="showFieldMappingModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Field Mapping Configuration</h3>
  <div class="modal-body">
    <div class="field-mapping-container">
      <div class="instructions">
        <p>Map original field names to new names. Leave mapping blank to exclude field from mapping.</p>
      </div>

      <div class="mapping-table-container" *ngIf="fieldMappingData && fieldMappingData.length > 0">
        <table class="table mapping-table">
          <thead>
            <tr>
              <th width="50%">Original Field Name</th>
              <th width="50%">Mapped Field Name</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let field of fieldMappingData; let i = index">
              <td class="original-field">
                <span class="field-tag">{{ field.original }}</span>
              </td>
              <td>
                <input type="text" class="clr-input mapping-input" [(ngModel)]="field.mapped"
                  placeholder="Enter new field name" (ngModelChange)="updateFieldMapping(i, $event)">
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="no-data-message" *ngIf="fieldMappingData && fieldMappingData.length === 0">
        <p>No fields available for mapping. Please check the data source configuration.</p>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="closeFieldMappingModal()">Cancel</button>
    <button type="button" class="btn btn-primary" (click)="updateFieldMappings()"
      [disabled]="!fieldMappingData || fieldMappingData.length === 0">Update Field Mappings</button>
  </div>
</clr-modal>

<!-- Scheduler Modal -->
<clr-modal [(clrModalOpen)]="showSchedulerModal" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
  <h3 class="modal-title">Job Scheduler</h3>
  <div class="modal-body">
    <div class="scheduler-container">
      <div class="data-lake-info">
        <h4>Data Lake: {{ selectedSchedulerItem?.name }}</h4>
      </div>

      <!-- Job Information -->
      <div class="job-info-section" *ngIf="schedulerJob">
        <div class="job-header">
          <h5>Job Information</h5>
          <span class="badge" [ngClass]="getStatusBadgeClass(schedulerJob.status)">
            {{ schedulerJob.status }}
          </span>
        </div>

        <div class="job-details">
          <div class="detail-row">
            <label>Job Name:</label>
            <span>{{ schedulerJob.name }}</span>
          </div>
          <div class="detail-row">
            <label>Job Type:</label>
            <span>{{ schedulerJob.jobType }}</span>
          </div>
          <div class="detail-row">
            <label>Description:</label>
            <span>{{ schedulerJob.description }}</span>
          </div>
        </div>

        <!-- Job Actions -->
        <div class="job-actions">
          <button class="btn btn-warning" (click)="pauseJob()" *ngIf="schedulerJob.status === 'RUNNING'">
            <clr-icon shape="pause"></clr-icon> Pause Job
          </button>
          <button class="btn btn-success" (click)="resumeJob()" *ngIf="schedulerJob.status === 'PAUSED'">
            <clr-icon shape="play"></clr-icon> Resume Job
          </button>
          <button class="btn btn-danger" (click)="stopJob()" *ngIf="schedulerJob.status !== 'STOPPED'">
            <clr-icon shape="stop"></clr-icon> Stop Job
          </button>
          <button class="btn btn-primary" (click)="restartJob()" *ngIf="schedulerJob.status === 'STOPPED'">
            <clr-icon shape="play"></clr-icon> Restart Job
          </button>
        </div>
      </div>

      <!-- No Job Found -->
      <div class="no-job-section" *ngIf="schedulerJob === null">
        <div class="no-job-message">
          <p>No scheduled job found for this Data Lake.</p>
          <p>Would you like to create a new job?</p>
        </div>

        <div class="create-job-actions">
          <button class="btn btn-primary" (click)="createJob()">
            <clr-icon shape="plus"></clr-icon> Create Job
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="closeSchedulerModal()">Close</button>
  </div>

</clr-modal>