<clr-modal
  [clrModalOpen]="true"
  [clrModalClosable]="false"
  id="recordModalRef"
  class="record-edit-modal position-relative"
>
  <h3 class="modal-title">
    {{ recordAction === 'ADD' ? 'Add' : 'Edit' }} record in
    {{ (libds?.split('.'))![0] }}.{{ (libds?.split('.'))![1] }}

    <ng-container *ngIf="recordAction === 'EDIT'">
      <span
        *ngIf="!currentRecord?.noLinkOption"
        class="position-absolute generate-record-url"
        >{{ generatedRecordUrl }}</span
      >
      <button
        *ngIf="!currentRecord?.noLinkOption"
        (click)="generateEditRecordUrl()"
        [disabled]="generateEditRecordUrlLoading"
        class="btn btn-link generate-record-url-button position-absolute"
      >
        {{
          generatedRecordUrl
            ? 'copy to clipboard'
            : generateEditRecordUrlLoading
              ? 'Generating url...'
              : 'Link to this record'
        }}
      </button>
    </ng-container>
  </h3>

  <div class="modal-body">
    <div
      *ngIf="addRecordLoading"
      class="d-flex justify-content-center align-items-center w-100 py-10"
    >
      <span class="spinner"> Loading... </span>
    </div>

    <ng-container *ngIf="!addRecordLoading">
      <ng-container
        *ngFor="
          let col of currentRecord | keyvalue: originalOrder;
          let colIndex = index;
          trackBy: trackByFn
        "
      >
        <ng-container
          *ngIf="
            col.key !== 'Action' &&
            col.key !== '_____DELETE__THIS__RECORD_____' &&
            col.key !== 'noLinkOption'
          "
        >
          <div class="column-entry clr-flex-column clr-flex-md-row">
            <div class="name-input-row">
              <p class="font-weight-bold">
                {{ col.key }}
                <clr-icon *ngIf="isColPk(col.key)" shape="key"></clr-icon>
              </p>

              <p class="cell-desc">
                {{ currentRecordValidator?.getRule(col.key)?.desc }}
              </p>
            </div>

            <div
              [ngSwitch]="currentRecordValidator?.getRule(col.key)?.type"
              class="inputs-wrapper position-relative"
            >
              <span
                *ngIf="currentRecordLoadings.includes(colIndex)"
                class="spinner spinner-inline flex-unset position-absolute entry-input-left-offset"
              >
                Loading...
              </span>

              <clr-icon
                *ngIf="currentRecordErrors.includes(colIndex)"
                class="flex-unset position-absolute entry-input-left-offset"
                shape="error-standard"
                status="warning"
              ></clr-icon>

              <ng-container *ngSwitchCase="'numeric'">
                <clr-input-container
                  *ngIf="
                    ['numeric', undefined].includes(
                      $any(currentRecordValidator?.getRule(col.key)?.editor)
                    )
                  "
                  class="numeric-input"
                  [class.invalid-data]="
                    currentRecordInvalidCols.includes(col.key)
                  "
                >
                  <input
                    clrInput
                    type="text"
                    class="not-char"
                    (focusin)="onRecordInputFocus($event, colIndex)"
                    (paste)="recordInputPaste($event)"
                    (input)="
                      recordInputChange($event, col.key);
                      currentRecord!.noLinkOption = true
                    "
                    [(ngModel)]="currentRecord![col.key]"
                  />
                </clr-input-container>

                <div
                  *ngIf="
                    ['autocomplete', 'autocomplete.custom'].includes(
                      $any(currentRecordValidator?.getRule(col.key)?.editor)
                    )
                  "
                >
                  <ng-container
                    *ngTemplateOutlet="
                      autocomplete;
                      context: { col: col, colIndex: colIndex }
                    "
                  ></ng-container>
                </div>
              </ng-container>

              <ng-container *ngSwitchCase="undefined">
                <clr-textarea-container
                  *ngIf="
                    [undefined].includes(
                      $any(currentRecordValidator?.getRule(col.key)?.editor)
                    )
                  "
                >
                  <textarea
                    #charTextarea
                    clrTextarea
                    (focusin)="onRecordInputFocus($event, colIndex)"
                    (paste)="recordInputPaste($event)"
                    (input)="recordInputChange($event, col.key)"
                    [class.invalid-data]="
                      currentRecordInvalidCols.includes(col.key)
                    "
                    [rows]="col.value.length > 80 ? 6 : 1"
                    [(ngModel)]="currentRecord![col.key]"
                    [maxLength]="
                      currentRecordValidator?.getRule(col.key)?.length
                    "
                    [class.not-char]="
                      currentRecordValidator?.getRule(col.key)?.type
                    "
                  >
                  </textarea>
                  <clr-control-helper
                    >{{ charTextarea.value.length }} /
                    {{
                      currentRecordValidator?.getRule(col.key)?.length
                    }}</clr-control-helper
                  >
                </clr-textarea-container>

                <div
                  *ngIf="
                    ['autocomplete', 'autocomplete.custom'].includes(
                      $any(currentRecordValidator?.getRule(col.key)?.editor)
                    )
                  "
                >
                  <ng-container
                    *ngTemplateOutlet="
                      autocomplete;
                      context: { col: col, colIndex: colIndex }
                    "
                  ></ng-container>
                </div>
              </ng-container>

              <div class="date-field" *ngSwitchCase="'intl-time'">
                <input
                  type="time"
                  step="1"
                  class="date-input"
                  [attr.aria-label]="col.key"
                  [class.invalid-data]="
                    currentRecordInvalidCols.includes(col.key)
                  "
                  [value]="currentRecord[col.key]"
                  (change)="recordTimeChange($event, col.key)"
                />
              </div>

              <div class="date-field" *ngSwitchCase="'intl-datetime'">
                <input
                  type="datetime-local"
                  step="1"
                  class="date-input"
                  [attr.aria-label]="col.key"
                  [class.invalid-data]="
                    currentRecordInvalidCols.includes(col.key)
                  "
                  [value]="toNativeDatetime(currentRecord[col.key])"
                  (change)="recordDatetimeChange($event, col.key)"
                />
              </div>

              <div class="date-field" *ngSwitchCase="'intl-date'">
                <input
                  type="date"
                  class="date-input"
                  [attr.aria-label]="col.key"
                  [class.invalid-data]="
                    currentRecordInvalidCols.includes(col.key)
                  "
                  [value]="currentRecord[col.key]"
                  (change)="recordDateChange($event, col.key)"
                />
              </div>
              <div *ngSwitchCase="'autocomplete'">
                <ng-container
                  *ngTemplateOutlet="
                    autocomplete;
                    context: { col: col, colIndex: colIndex }
                  "
                ></ng-container>
              </div>
            </div>
          </div>

          <hr class="mt-10" />
        </ng-container>
      </ng-container>
    </ng-container>
  </div>
  <div
    class="modal-footer p-0 clr-gap-5 clr-gap-md-0 clr-flex-column clr-flex-md-row"
  >
    <clr-alert
      *ngIf="currentRecordInvalidCols.length > 0"
      class="validation-info-alert"
      [style.visibility]="
        currentRecordInvalidCols.length > 0 ? 'visible' : 'hidden'
      "
      [clrAlertClosable]="false"
      [clrAlertType]="'danger'"
    >
      <clr-alert-item>
        <span class="alert-text"> Data Validation Errors - Please Review </span>
      </clr-alert-item>
    </clr-alert>

    <div *ngIf="currentRecordInvalidCols.length < 1" class="prev-next">
      <button
        type="button"
        class="btn btn-outline focusable"
        tabindex="0"
        aria-label="Previous record"
        (click)="onPreviousRecordClick()"
        [disabled]="currentRecordInvalidCols.length > 0"
      >
        <clr-icon shape="angle left" size="23"></clr-icon>
      </button>
      <p>
        Current row: <strong> {{ currentRecordIndex + 1 }} </strong>
      </p>
      <button
        type="button"
        class="btn btn-outline focusable"
        tabindex="0"
        aria-label="Next record"
        (click)="onNextRecordClick()"
        [disabled]="currentRecordInvalidCols.length > 0"
      >
        <clr-icon shape="angle right" size="23"></clr-icon>
      </button>
    </div>

    <div>
      <button
        type="button"
        class="btn btn-outline focusable mr-5i"
        (click)="currentRecord!.noLinkOption = false; closeRecordEdit()"
      >
        Cancel
      </button>
      <button
        type="button"
        class="btn btn-primary focusable"
        (click)="confirmRecordEdit()"
        [disabled]="currentRecordInvalidCols.length > 0"
      >
        Confirm
      </button>
    </div>
  </div>

  <ng-template #autocomplete let-col="col" let-colIndex="colIndex">
    <div
      *ngIf="
        currentRecordValidator?.hasDqRules(col.key, [
          'SOFTSELECT',
          'SOFTSELECT_HOOK'
        ]);
        else other_than_soft_select
      "
    >
      <app-soft-select
        (focusin)="onRecordInputFocus($event, colIndex)"
        [(value)]="currentRecord[col.key]"
        [inputId]="col.key"
        (onInputEvent)="onRecordDropdownChange(col.key, colIndex)"
      >
        <option
          [ngValue]="item"
          *ngFor="
            let item of $any(currentRecordValidator?.getRule(col.key)?.source)
          "
        >
          {{ item }}
        </option>
      </app-soft-select>
    </div>
    <ng-template #other_than_soft_select>
      <select
        (focusin)="onRecordInputFocus($event, colIndex)"
        [(ngModel)]="currentRecord![col.key]"
        clrSelect
      >
        <option
          *ngFor="
            let item of $any(currentRecordValidator?.getRule(col.key)?.source)
          "
          [value]="item"
        >
          {{ item }}
        </option>
      </select>
    </ng-template>
  </ng-template>
</clr-modal>
