<!-- Copyright © 2019 by Teradata.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute,
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or
substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->

<link rel="stylesheet" href="/plugins/teradata/resource/css/aster-ui.css">
<link rel="stylesheet" href="/plugins/teradata/resource/css/jquery-ui.css">
<link rel="stylesheet" href="/plugins/teradata/resource/css/jquery.tagsinput.min.css" />
<link rel="stylesheet" href="/plugins/teradata/resource/css/jquery.flexdatalist.min.css" />
<link rel="stylesheet" href="/plugins/teradata/resource/css/glyphs.css">
<!-- <link rel="stylesheet" href="/plugins/TeradataVantageSQLEFunctionsPlugin/resource/tagsinput/bootstrap.min.css">
<link rel="stylesheet" href="/plugins/TeradataVantageSQLEFunctionsPlugin/resource/tagsinput/bootstrap-theme.min.css">
<link rel="stylesheet" href="/plugins/TeradataVantageSQLEFunctionsPlugin/resource/tagsinput/bootstrap-tagsinput.css"> -->
<!-- <script src="/plugins/TeradataVantageSQLEFunctionsPlugin/resource/tagsinput/bootstrap-tagsinput-angular.js"></script> -->
<script src="/plugins/teradata/resource/js/jquery.tagsinput.min.js"></script>
<script src="/plugins/teradata/resource/js/jquery.flexdatalist.min.js"></script>
<!-- <script src="/plugins/TeradataVantageSQLEFunctionsPlugin/resource/tagsinput/bootstrap-tagsinput-angular.js"></script> -->


<div id="main-container">
  
  <div ng-controller="TeradataVantageController">

    <div class="control-group">

     <div id="tag-enter-form">
      <form>

      <input style="width:95%" type="text" id="tag_enter_txt" class="text ui-widget-content ui-corner-all" />

      </form>
    </div>


    <div id="dialog-reset" title="Reset to Default?">
      <p class="inner-label">These parameter values will be reset to the defaults. Are you sure?</p>
    </div>

    <div id="dialog-param-plot-settings" title="Setup Layout Settings">
      <label for="row_setup">Row:</label>
      <input type="number" id="row_setup" name="row_setup" value="2" min="1" max="6">
      <label for="column_setup">Column:</label>
      <input type="number" id="column_setup" name="column_setup" value="2" min="1" max="6">

    </div>


    <div id="dialog-param-add" title="Add a New Plot?">
      <p class="inner-label">A new plot will be added to this recipe. Are you sure?</p>
    </div>

    <div id="dialog-param-remove" title="Remove Current Plot?">
      <p class="inner-label">The current plot will be removed from this recipe. Are you sure?</p>
    </div>

    <!-- search filters -->
    <table style="width:100%">
      <tr  style="width:100%">
        <td  style="width:100%">
          <div  style="width:100%">

              <input type="checkbox" checked id="filter_sqle">&nbsp&nbspAnalytics Database&nbsp&nbsp</input>&nbsp
              <input type="checkbox" checked id="filter_valib">&nbsp&nbspVAL&nbsp&nbsp</input>&nbsp
              <input type="checkbox" checked id="filter_uaf">&nbsp&nbspUAF Time Series&nbsp&nbsp</input>&nbsp&nbsp

              <!-- SKS: Add version button -->
              <button type="button" ng-click="showVersionDialog()" data-toggle="tooltip" data-container="body" data-html="true" 
              title="Reports information about the connected Analytics Database version and the current recipe coverage of functions.">Version</button>
              <!-- SKS: Add query button -->
              <button type="button" ng-click="showQueryDialog()" data-toggle="tooltip" data-container="body" data-html="true" 
              title="See what your output query will look like.">Query</button>

               <!-- SKS: Settings Layout -->
              <button ng-if="config.function.name=='TD_PLOT'" type="button" ng-click="plotSettingsLayout()" data-toggle="tooltip" data-container="body" data-html="true" class="plot-button"
              title="Choose your plot layout."><span class="glyphicon glyphicon-cog orange"></span></button>

              <!-- SKS: Previous plot button -->
              <button id="previous-plot-button" ng-if="config.function.name=='TD_PLOT'" type="button" ng-click="previousPlot()" data-toggle="tooltip" data-container="body" data-html="true" ng-disabled="config.current_param_store_index == 0" class="plot-button" 
              title="Navigate to a previous plot."><span class="glyphicon glyphicon-backward orange"></span></button>
              <!-- SKS: Add plot button -->
              <button ng-if="config.function.name=='TD_PLOT'" type="button" ng-click="addPlot()" data-toggle="tooltip" data-container="body" data-html="true" class="plot-button"
              title="Add a new plot."><span class="glyphicon glyphicon-plus-sign orange"></span></button>
              <!-- SKS: Remove plot button -->
              <button ng-if="config.function.name=='TD_PLOT'" type="button" ng-click="removePlot()" data-toggle="tooltip" data-container="body" data-html="true" ng-disabled="config.param_store.length < 2" class="plot-button"
              title="Remove an existing plot."><span class="glyphicon glyphicon-minus-sign orange"></span></button>
              <!-- SKS: Next plot button -->
              <button ng-if="config.function.name=='TD_PLOT'" type="button" ng-click="nextPlot()" data-toggle="tooltip" data-container="body" data-html="true" ng-disabled="config.current_param_store_index == config.param_store.length-1" class="plot-button"
              title="Navigate to the next plot."><span class="glyphicon glyphicon-forward orange"></span></button>
              <!-- SKS: Show plot button -->
              <button ng-if="config.function.name=='TD_PLOT'" type="button" ng-click="showPlotDialog()" data-toggle="tooltip" data-container="body" data-html="true" class="plot-button" 
              title="See what your output plot will look like."><span class="glyphicon glyphicon-picture orange"></span></button>

              <!-- SKS: Documentation Icon -->
              <a href ="https://www.dataiku.com/product/plugins/teradata" class="link1" target="_blank">
                <span class="glyphicon glyphicon-question-sign"></span>
              </a>

          </div>
        </td>
      </tr>
    </table>
    
    <label class="control-label">Function Name</label>
      <div class="controls">
        <!-- <select ng-model="config.function" ng-options="cleanName(choice.name) for choice in choices track by choice.name" ng-change="refresh(config.function.name)"> -->
        <!-- Replaced above with function_alias_name -->
        <select id="main_function_name" ng-model="config.function" ng-options="choice.function_alias_name for choice in choices track by choice.name" ng-change="refresh(config.function.name)"></select>
          <option  value="" disabled selected></option>
        </select>

        <input type="text" list="available_functions" placeholder="Select a Vantage function..." id="current_function_name">
        </input>
        <datalist name="available_functions" id="available_functions"  >
        </datalist>


        <!-- SKS: Add reset button -->
        <button type="button" ng-click="showResetDialog()" data-toggle="tooltip" data-container="body" data-html="true" 
        title="Reset the parameters of the function to defaults.">Reset</button>

      </div>



    </div>
  <!-- <div>
    
<H1>{{ config.function.test_model }}</H1>


  </div> -->
    <div class="control-group" ng-if="config.function">
      <label class="control-label">Description</label>
      <div class="controls" style="max-width: 80%; overflow-y:scroll; max-height:150px;">
        {{ getFunctionDescription() }}
      </div>
      <label ng-show=" connectionErrorMessage!='' "  style="color:red;display: inline-block">
              {{connectionErrorMessage}}
      </label>
      <label ng-show=" config.function.name.includes('VAL') && valDatabase=='' " style="color:red;display: inline-block">
              Error: To use this VAL function, specify first a database name for the VAL_DATABASE custom property in your connection settings. 
      </label>
      <label ng-show=" config.function.name.includes('VAL') && defaultDatabase=='' " style="color:orange;display: inline-block">
              Warning: To avoid errors, you must either (a) specify a default database in your connection, or (b) specify schema(s) in the input Dataset(s) settings.
      </label>
      <label ng-show=" !config.function.name.includes('VAL') && defaultDatabase=='' " style="color:#839192;display: inline-block">
              As a good practice you should either (a) specify a default database in your connection, or (b) specify schema(s) in the input Dataset(s) settings.
      </label>
    </div>



    <!-- <div class="control-group" ng-if="hasNativeJSON(config.function.name)"> -->
      <!-- <label class="control-label">Drop Output Table If Exists</label> -->
      <!-- <label class="control-label">Use @  Alias</label>
      <div class="controls">
        <input type="checkbox" ng-model="config.function.useCoprocessor" ng-click="refreshTeraTabs()" title="Override Native Function with @Coprocessor Function Alias"></input>
      </div>
    </div> -->


    <div class="control-group">
      <!-- <label class="control-label">Drop Output Table If Exists</label> -->
      <label class="control-label">Drop Output Table/s</label>
      <div class="controls">
        <input type="checkbox" ng-model="config.function.dropIfExists" title="DROPs ALL Output Tables generated by the function"></input>
        <span style="padding-left:10px" ><em>Check if Output Tables already exists.</em></span>
      </div>
    </div>


  <!--<div><p >Test</p></div>-->
  <div class="control-group" ng-if="config.distribution == 'fact'">
    <label class="control-label">Distribution Key</label>
    <div class="controls" style="max-width: 40%; text-align: justify">
      <input required type="text" ng-model="config.distribution_key" data-toggle="tooltip" data-container="body" data-html="false"
        title="distribution_key" data-placement="right" />
    </div>
  </div>


  <hr ng-if="config.function">


  <div class="control-group" ng-if="config.function">

  
      <div class="tabplugin">
        <button type="button" class="tablinks" id="defaultOpen" ng-click="openTabs($event, 'tabs-required')">Required Arguments</button>
        <button type="button" class="tablinks" ng-if="hasOptionalArguments()" ng-click="openTabs($event, 'tabs-optional')">Optional Arguments</button>        
        <button type="button" class="tablinks" ng-if="false" ng-click="openTabs($event, 'tabs-table')">SQL Clauses</button>        
        
      </div>
      <div id="tabs-required" class="plugintabcontent">
        <!-- MAIN FUNCTION REQUIRED -->
        <h5 ng-show=config.function.hasPartnerFunction>{{config.function.function_alias_name}}'s arguments</h5>
        <table class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">

          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
              <!--<th>Message</th>-->
            </tr>
          </thead>

          <tbody ng-show="shouldRender()">
            <tr ng-if="shouldShowPartitionOrderFields(config.function.unaliased_inputs)">
              <td>Unaliased Input Tables</td>
              <td>
                <select required multiple size="8" ng-model="config.function.unaliased_inputs.values" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs"
                  data-toggle="tooltip" data-container="body" data-placement="right" data-html="true" title="<b>(Ctrl+Click to multi-select)</b>">
                  </select>
              </td>
            </tr>
            
            <tr 
            ng-repeat="item in config.function.required_input" 
            ng-model="config.function.required_input" 
            ng-if="item.hasOwnProperty('name') && item.isRequired"
            ng-hide="config.function.name =='TD_PLOT' && item.uaf.index!=config.current_param_store_index"> <!-- Only show curretnt Plot-->

              <td style="text-transform: capitalize">{{ cleanName(item.name) }} {{ cleanKind(item.kind) }}</td>
              <td>
                <!-- Aliased Input Table Selection-->
                <select required ng-model="item.value" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs"
                        ng-change="changeInputModelTable(item)">
                      <option value="" selected>--No Selection--</option>
                  </select>

                  <!-- Add UAF Type-->
                  <div ng-if="item.hasOwnProperty('uafType')">
                    <label class="fixed-label-size">Input Type </label>
                    <select required ng-model="item.uafType" data-container="body" data-toggle="tooltip" title="{{ getToolTip('UAF_FUNCTION') }}" data-placement="right">
                      <option value="">--No Selection--</option>
                      <option ng-if="item.uaf.requiredUafKind.includes('SERIES')" value="SERIES">SERIES</option>
                      <option ng-if="item.uaf.requiredUafKind.includes('MATRIX')" value="MATRIX">MATRIX</option>
                      <option ng-if="item.uaf.requiredUafKind.includes('ART')" value="ART">ART</option>
                      <option ng-if="item.uaf.requiredUafKind.includes('GENSERIES')" value="GENSERIES">GENSERIES</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" ng-model="item.uaf.details">&nbsp;&nbsp;&nbsp;Details</input>
                  </div>
                  <!-- UAF GENSERIES UI-->
                  <span ng-if="item.uafType=='GENSERIES'">
                      <label class="fixed-label-size">Instance Names </label>
                      <input type="text" ng-model="item.uaf.instance_names" data-toggle="tooltip" data-container="body" 
                         data-html="true" title="Sets the columns and values for the generated series. It is a JSON object that contains one or more name-value pairs, each of which contains a series identifier name and its value." data-placement="right" />
                      &nbsp;&nbsp;&nbsp;&nbsp;
                       <label class="fixed-label-size">Data Type </label>
                      <input type="text" ng-model="item.uaf.data_type" data-toggle="tooltip" data-container="body" 
                         data-html="true" title="Sets the data types of the identifying columns for the generated series." data-placement="right" />
                    </span>
                  <!-- UAF SERIES UI-->
                  <div ng-if="item.hasOwnProperty('uafType')" ng-show="item.uaf.details">
                    <span ng-if="item.uafType!='ART' && item.uafType!='GENSERIES'">
                      <label class="fixed-label-size">Row </label>
                      <select required ng-model="item.uaf.is_row_sequence" data-container="body" data-toggle="tooltip" title="UAF Row Sequence or Timecode" data-placement="right">
                        <option value="TIMECODE">TIMECODE</option>
                        <option value="SEQUENCE">SEQUENCE</option>
                      </select>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <input required type="text" ng-model="item.uaf.row_axis_name" data-toggle="tooltip" data-container="body" 
                         data-html="true" title="Sets the UAF Row Field" data-placement="right" />
                    </span>
                    <span ng-if="item.uafType=='MATRIX'">
                      <label class="fixed-label-size">Column </label>
                      <select required ng-model="item.uaf.is_col_sequence" data-container="body" data-toggle="tooltip" title="UAF Column Sequence or Timecode" data-placement="right">
                        <option value="TIMECODE">TIMECODE</option>
                        <option value="SEQUENCE">SEQUENCE</option>
                      </select>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <input required type="text" ng-model="item.uaf.column_axis_name" data-toggle="tooltip" data-container="body" 
                         data-html="true" title="Sets the UAF Column Field" data-placement="right" />
                    </span>
                    <span>
                      <label ng-if="item.uafType!='GENSERIES'" class="fixed-label-size">ID </label>
                          <table ng-if="item.uafType!='GENSERIES'">
                            <tr>
                              <td>
                                <input ng-if="item.uafType!='ART'" required class="teradata-tags" ng-model="item.uaf.id_name" type="text" 
                              data-toggle="tooltip" data-container="body" data-html="true" title="UAF {{item.uafType=='SERIES' ? 'Series' : 'Matrix'}} ID"
                              data-placement="right"></input>
                              </td>
                              <td>
                                <input  class="teradata-tags" ng-model="item.uaf.id_sequence" type="text" 
                              data-toggle="tooltip" data-container="body" data-html="true" title="UAF ID Sequence"
                              data-placement="right"></input>
                              </td>
                            </tr>
                          </table>
                    </span>
                    <span>
                      <label class="fixed-label-size">Payload </label>
                          <table ng-if="item.uafType!='GENSERIES'">
                            <tr>
                              <td>
                                <input ng-required="item.uafType!='ART'" class="teradata-tags" ng-model="item.uaf.payload_fields" type="text" 
                              data-toggle="tooltip" data-container="body" data-html="true" title="Payload Field"
                              data-placement="right"></input>
                              </td>
                              <td>
                                <select ng-required="item.uafType!='ART'" ng-model="item.uaf.payload_content" data-container="body" data-toggle="tooltip" title="Payload Content" data-placement="right">
                                  <option value="REAL">REAL</option>
                                  <option value="COMPLEX">COMPLEX</option>
                                  <option value="AMPL_PHASE">AMPL_PHASE</option>
                                  <option value="AMPL_PHASE_RADIANS">AMPL_PHASE_RADIANS</option>
                                  <option value="AMPL_PHASE_DEGREES">AMPL_PHASE_DEGREES</option>
                                  <option value="MULTIVAR_REAL">MULTIVAR_REAL</option>
                                  <option value="MULTIVAR_COMPLEX">MULTIVAR_COMPLEX</option>
                                  <option value="MULTIVAR_ANYTYPE">MULTIVAR_ANYTYPE</option>
                                  <option value="MULTIVAR_AMPL_PHASE">MULTIVAR_AMPL_PHASE</option>
                                  <option value="MULTIVAR_AMPL_PHASE_RADIANS">MULTIVAR_AMPL_PHASE_RADIANS</option>
                                  <option value="MULTIVAR_AMPL_PHASE_DEGREES">MULTIVAR_AMPL_PHASE_DEGREES</option>
                                </select>
                              </td>
                            </tr>
                          </table>
                          <table ng-if="item.uafType=='GENSERIES'">
                            <tr>
                              <td>
                                <label class="fixed-label-size">Start Value</label>
                                <input ng-model="item.uaf.payload_start_value" type="text" 
                              data-toggle="tooltip" data-container="body" data-html="true" title="Payload Start Value"
                              data-placement="right"></input>
                              </td>
                              <td>
                                <label class="fixed-label-size">Offset Value</label>
                                <input ng-model="item.uaf.payload_offset_value" type="text" 
                              data-toggle="tooltip" data-container="body" data-html="true" title="Payload Offset Value"
                              data-placement="right"></input>
                              </td>
                              <td>
                                <label class="fixed-label-size">Number Entries</label>
                                <input ng-model="item.uaf.payload_num_entries" type="text" 
                              data-toggle="tooltip" data-container="body" data-html="true" title="Payload Number Entries"
                              data-placement="right"></input>
                              </td>
                            </tr>
                            </table>
                    </span>
                    <span ng-if="item.uafType!='GENSERIES'">
                      <label class="fixed-label-size">Layer </label>
                      <input type="text" ng-model="item.uaf.layer" data-toggle="tooltip" data-container="body" 
                         data-html="true" title="Sets the UAF Layer" data-placement="right" />
                      &nbsp;&nbsp;&nbsp;&nbsp;

                      <!-- 
                       <select ng-model="item.uaf.interval" data-container="body" data-toggle="tooltip" title="Interval Enable" data-placement="right"
                        ng-if="item.uafType=='SERIES'">
                        <option value="Off">Off</option>
                        <option value="On">On</option>
                       </select>
                      -->

                    </span>


                    <span ng-if="item.uafType=='SERIES'">
                      <label class="fixed-label-size">Interval </label>
                      
                      <select ng-model="item.uaf.time_duration" data-container="body" data-toggle="tooltip" title="Interval Time Duration" data-placement="right">
                        <option value="CAL_YEARS">CAL_YEARS</option>
                        <option value="CAL_MONTHS">CAL_MONTHS</option>
                        <option value="CAL_DAYS">CAL_DAYS</option>
                        <option value="WEEKS">WEEKS</option>
                        <option value="DAYS">DAYS</option>
                        <option value="HOURS">HOURS</option>
                        <option value="MINUTES">MINUTES</option>
                        <option value="SECONDS">SECONDS</option>
                        <option value="MILLISECONDS">MILLISECONDS</option>
                        <option value="MICROSECONDS">MICROSECONDS</option>
                      </select>

                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <select ng-model="item.uaf.time_type" data-container="body" data-toggle="tooltip" title="Interval Type" data-placement="right">
                        <option value=""></option>
                        <option value="float">Float</option>
                        <option value="integer">Integer</option>
                      </select>
                    </span>
                    <span  ng-if="item.uafType=='SERIES'">
                      <label class="fixed-label-size">Zero </label>
                     <select ng-model="item.uaf.time_zero" data-container="body" data-toggle="tooltip" title="Time Zero" data-placement="right">
                        <option value=""></option>
                        <option value="DATE">DATE</option>
                        <option value="TIMESTAMP">TIMESTAMP</option>
                        <option value="TIMESTAMP WITH TIME ZONE">TIMESTAMP WITH TIME ZONE</option>
                      </select>

                      
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <input type="text" ng-model="item.uaf.seq_zero" data-toggle="tooltip" data-container="body" 
                         data-html="true" title="Sequence Zero" data-placement="right" />
                    </span>




                    <span ng-if="item.uafType!='GENSERIES'">
                      <label class="fixed-label-size">WHERE </label>
                      <input type="text" ng-model="item.uaf.where" data-toggle="tooltip" data-container="body" 
                         data-html="true" title="Sets the UAF Where" data-placement="right" />
                    </span>

                  </div>


                  <!-- Aliased Input Table Partition if multiple-->

                <div class="inner-cell" ng-if="item.inputKindChoices.length > 1">
                  <p class="inner-label">Data Partition Option </p>
                  <select ng-model="item.kind" data-container="body" data-toggle="tooltip" title="{{ getToolTip('DATA_PARTITION_TYPE') }}" data-placement="right">
                      <option value="None">None</option>
                      <option value="PartitionByKey">Partition</option>
                      <option value="HashByKey">Hash</option>
                      <option ng-if="item.inputKindChoices.includes('Dimension')" value="Dimension">Dimension</option>
                  </select>
                </div>

                <!-- Aliased Input Table Partition if Key-->
                <div class="inner-cell" ng-show="item.kind.includes('ByKey')">
                  <p class="inner-label" ng-show="item.kind == 'PartitionByKey'">Partition by 
                      <button style="border:none;background:none;" ng-init="item.partitionAttributes = initializeColumnArray(item.partitionAttributes)" ng-click="addPartitionByColumn_TEST(item.partitionAttributes)" title="Add Partition Column">
                        <span class="glyphicon glyphicon-plus-sign orange"></span></button>
                  </p>
                  <p class="inner-label" ng-show="item.kind == 'HashByKey'">Hash by 
                      <button style="border:none;background:none;" ng-init="item.partitionAttributes = initializeColumnArray(item.partitionAttributes)" ng-click="addPartitionByColumn_TEST(item.partitionAttributes)" title="Add Partition Column">
                        <span class="glyphicon glyphicon-plus-sign orange"></span></button>
                  </p>
                  <div ng-show="item.kind.includes('ByKey')" ng-repeat="col in item.partitionAttributes track by $index ">
                      <span ng-show="'PartitionByKey' == item.kind">Column {{$index+1}}</span>
                      <span ng-show="'HashByKey' == item.kind">Column {{$index+1}}</span>
                      <div>
                          <select  required ng-model="item.partitionAttributes[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                          data-html="true" title="{{ getToolTip(item.kind != 'HashByKey' ? 'PARTITION_BY' : 'HASH_BY') }}" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <option value="" selected>--No Selection--</option>
                        </select>
                            <button style="border:none;background:none;" ng-if="item.partitionAttributes.length > 1" ng-click="removePartitionByColumn_TEST(item.partitionAttributes,$index)"
                              title="Remove Script Argument">
                              <span class="glyphicon glyphicon-minus-sign orange"></span>
                            </button>
                      </div>
                    </div>
                </div>
                <!-- Aliased Input Table Order isOrdered-->
                <div ng-hide="item.kind=='PartitionByNone'" class="inner-cell">
                  <p class="inner-label" ng-show="item.kind.includes('ByKey') || item.kind.includes('Dimension')">Order by
                      <button style="border:none;background:none;" ng-init="item.orderByColumn = initializeColumnArray(item.orderByColumn); item.orderByColumnDirection = initializeColumnArray(item.orderByColumnDirection)" ng-click="addOrderByColumn_WITHDIR(item.orderByColumn, item.orderByColumnDirection)" title="Add Order BY Column"><span class="glyphicon glyphicon-plus-sign orange"></span></button>
                  </p> 
                  <!-- IS Ordered -->
                    <div ng-if="item.isOrdered && item.kind.includes('ByKey') || item.kind.includes('Dimension')" ng-repeat="col in item.orderByColumn track by $index ">
                        <span ng-show="item.isOrdered">Column {{$index+1}}</span>          
                        <div >
                            <select required ng-model="item.orderByColumn[$index]"
                            ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                            title="{{ getToolTip(item.kind != 'HashByKey' ? 'ORDER_BY' : 'LOCAL_ORDER_BY') }}" data-toggle="tooltip" data-container="body"
                            data-placement="right">
                            <option value="" selected>--No Selection--</option>
                          </select>
                          <span>
                            <select class="orderbyselect" ng-model="item.orderByColumnDirection[$index]"                            
                            title="{{getToolTip('SEQUENCING_TYPE')}}" data-toggle="tooltip" data-container="body"
                            data-placement="right">                            
                            <option value="" selected>ASC</option>
                            <option value="DESC">DESC</option>
                          </select>
                          </span>
                              <button style="border:none;background:none;" ng-if="item.orderByColumn.length > 1" ng-click="removeOrderByColumn_WITHDIR(item.orderByColumn, item.orderByColumnDirection,$index)"
                                title="Remove Script Argument">
                                <span class="glyphicon glyphicon-minus-sign orange"></span>
                              </button>
                        </div>                   
                    </div>
                  <!-- Is Not Ordered -->
                    <div ng-if="!item.isOrdered && item.kind.includes('ByKey')" ng-repeat="col in item.orderByColumn track by $index ">
                      <span ng-show="!item.isOrdered">Column {{$index+1}}</span>                        
                      <div >
                          <select ng-model="item.orderByColumn[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                          title="{{ getToolTip(item.kind != 'HashByKey' ? 'ORDER_BY' : 'LOCAL_ORDER_BY') }}" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <option value="" selected>--No Selection--</option>
                        </select>
                        <span>
                          <select class="orderbyselect" ng-model="item.orderByColumnDirection[$index]"                            
                          title="{{getToolTip('SEQUENCING_TYPE')}}" data-toggle="tooltip" data-container="body"
                          data-placement="right">                            
                          <option value="" selected>ASC</option>
                          <option value="DESC">DESC</option>
                        </select>
                        </span>
                            <button style="border:none;background:none;" ng-if="item.orderByColumn.length > 1" ng-click="removePartitionByColumn_TEST(item.orderByColumn,$index)"
                              title="Remove Script Argument">
                              <span class="glyphicon glyphicon-minus-sign orange"></span>
                            </button>
                        </div>                   
                      </div>
                </div>
                <!--  -->

              </td>
            </tr>
            <!-- Is Ordered -->
            <tr ng-if="config.function.isOrdered && shouldShowPartitionOrderFields(config.function.unaliased_inputs) && item.kind.includes('ByKey')">
              <td>ORDER BY Column
                  <button style="border:none;background:none;" ng-click="addOrderByColumn()" title="Add ORDER BY Column"><span class="glyphicon glyphicon-plus-sign orange"></span></button>
              </td>
              <td>
                  <div ng-repeat="col in config.function.orderByColumn track by $index ">
                      <span>Column {{$index+1}}</span>                    
                      <div>
                          <select required ng-model="config.function.orderByColumn[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in getSchemaOfUnaliasedInputs(config.function.unaliased_inputs)"
                          data-html="true" title="<b>Select an ORDER BY column</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                            <option value="" selected>--No Selection--</option>
                          </select>
                          <span>
                            <select class="orderbyselect" required ng-model="config.function.orderByColumnDirection[$index]"                            
                            title="<b>Select which direction the of this ORDER BY Clause</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">
                            <!-- <option value="" selected>--No Selection--</option> -->
                              <option value="" selected>ASC</option>
                              <option value="DESC">DESC</option>
                            </select>
                          </span>
                          <button style="border:none;background:none;" ng-if="config.function.orderByColumn.length > 1" ng-click="removeOrderByColumn($index)"
                            title="Remove Script Argument">
                            <span class="glyphicon glyphicon-minus-sign orange"></span>
                          </button>
                      </div>
               
                  </div>
              </td>
              <!--<td>{{ validation_message('orderByColumn') }}</td>-->
            </tr>
            <!-- Is NOT Ordered -->
            <!-- Should I add? -->
            <!-- TODO: Check if I should add an Order by outside ON Clause if NOT in same row of Input Table -->

            <tr ng-if="shouldShowPartitionOrderFields(config.function.unaliased_inputs) && config.function.partitionInputKind.indexOf('PartitionByAny') !== -1 && config.function.partitionInputKind.length > 1">
              <td>PARTITION BY ANY</td>
              <td>
                <input type="checkbox" ng-model="config.function.partitionByAny"></input>
              </td>
            </tr>

            <tr ng-if="shouldShowPartitionOrderFields(config.function.unaliased_inputs) && config.function.partitionInputKind.indexOf('PartitionByKey') !== -1">
              <td>PARTITION BY Column
                  <button style="border:none;background:none;" ng-disabled="config.function.partitionByAny" ng-click="addPartitionByColumn()" title="Add Partition Column"><span class="glyphicon glyphicon-plus-sign orange"></span></button>
              </td>
              <td>
                  <div ng-repeat="col in config.function.partitionAttributes track by $index ">                     
                      <span>PARTITION BY column {{$index+1}}</span>
                      <div>
                          <select required ng-disabled="config.function.partitionByAny" ng-model="config.function.partitionAttributes[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in getSchemaOfUnaliasedInputs(config.function.unaliased_inputs)"
                          data-html="true" title="<b>(Ctrl+Click to multi-select)</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <option value="" selected>--No Selection--</option>
                        </select>
                            <button style="border:none;background:none;" ng-if="config.function.partitionAttributes.length > 1" ng-click="removePartitionByColumn($index)"
                              title="Remove Script Argument">
                              <span class="glyphicon glyphicon-minus-sign orange"></span>
                            </button>
                      </div>                  
                        </div>     
              </td>
            </tr>
            <!-- Added output_table stuff -->
            <tr ng-repeat="item in config.function.output_tables" ng-model="config.function.output_tables" ng-if="item.isRequired">
              <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}</td>
              <td>
                <input required type="text" ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" />
                <span style="padding-left:30px" >This same table name must be entered into the <strong>Input / Output</strong> tab above as an Output.</span>
              </td>
            </tr>


            <tr ng-repeat="item in config.function.arguments" ng-model="config.function.arguments" ng-if="item.isRequired && useNativeOrNot(item.inNative) && !item.datatype.startsWith('GROUP') ">
              <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}
                <!-- Button for columns-->
                <button ng-if="multiColumnNamesCheck(item) && !getPermittedValuesWithName(item)"
                style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Column">
                 <span class="glyphicon glyphicon-plus-sign orange"></span>
               </button>
               <!-- Button for string permitted values-->
               <button ng-if="getPermittedValuesWithName(item) && item.allowsLists"
                style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Value">
                 <span class="glyphicon glyphicon-plus-sign orange"></span>
               </button>
              </td>
              </td>
              <td>
                <!-- SKS: Support for validating numeric types, with Min and Max and Step attributes, previous was type="text" and no min, max or step -->
                <input 
                       type="{{['DOUBLE','INTEGER', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? 'number' : 'text'}}" 
                       min ="{{['DOUBLE','INTEGER', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? getLowerBoundValuesWithName(item) : ''}}"
                       max ="{{['DOUBLE','INTEGER', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? getUpperBoundValuesWithName(item) : ''}}"
                       step ="{{['DOUBLE', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? getStepRangeValuesWithName(item) : '1'}}"

                    ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="YYYYYYYY{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" />


                <input required class="teradata-tags" param-name="{{item.name}}" ng-model="item.value" type="text" ng-if="['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 && item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right"></input>

                <input type="checkbox" ng-model="item.value" ng-if="item.datatype == 'BOOLEAN'" data-toggle="tooltip" data-container="body"
                  data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right" />

                <!-- <select required ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)">
                    <option value="" selected>--No Selection--</option>
                  </select> -->

                  <input required type='text' 
                  ng-change=" item.value = validateColumnName(item, item.value, getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)) "
                  ng-model-options="{updateOn : 'change'}"
                  placeholder='Add Parameter'                     
                  list='item{{item.name}}'    
                  ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" 
                  data-html="true" 
                  title="{{ getArgumentDescriptionWithName(item.name) }}"
                  ng-model="item.value"
                  
                  data-placement="right" data-container="body" >      
                  <datalist id="item{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>


                  <!-- <span>
                    Use Column Name Input
                  </span>
                  <span>
                      Use Column Name Input
                    </span> -->
                    <!-- REMOVED POTENTIAL ERRONEOUS CODE -->
                  <!-- <select required ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container="body" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)">
                  </select> -->

                <!-- <select required multiple  size="8" ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container="body" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)">
                  </select> -->
                  <!-- <input required type='text'
                        placeholder='Add Parameter'                     
                        list='{{item.name}}'    
                        ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"   
                        data-toggle="tooltip" 
                        data-html="true" 
                        title="{{ getArgumentDescriptionWithName(item.name) }}"
                        ng-model="item.value"
                        ng-change="testPrint(test_model)"
                        data-placement="right" data-container="body" >      
                  <datalist id="{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>      -->

                  <div ng-repeat="col in item.value track by $index" ng-if="multiColumnNamesCheck(item) && item.isRequired && item.allowsLists && !getPermittedValuesWithName(item)">
                    <!-- <select required
                    ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" data-container=body ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)">
                        <option value="" selected>--No Selection--</option>

                    </select>                       -->
                    <input required type='text'
                  ng-change=" item.value[$index] = validateColumnName(item, item.value[$index], getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)) "
                  ng-model-options="{updateOn : 'change'}"
                  placeholder='Add Parameter'                     
                  list='item{{item.name}}'                      
                  data-toggle="tooltip" 
                  data-html="true" 
                  title="{{ getArgumentDescriptionWithName(item.name) }}"
                  ng-model="item.value[$index]"
                  
                  data-placement="right" data-container="body" >      

                  <datalist id="item{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>


                    <button style="border:none;background: none;" ng-if="item.value.length > 1" ng-click="removeColumnArgument(item,$index)" title="Remove Column">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>

                <select required ng-if="item.datatype == 'TABLE_NAME' && !isArgumentOutputTable(item) && !getPermittedValuesWithName(item)" ng-model="item.value"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs">
                    <option value="" selected>--No Selection--</option>
                  </select>

                <select required ng-if="getPermittedValuesWithName(item) && !item.allowsLists" ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true"
                  title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right" ng-options="t as t for t in getPermittedValuesWithName(item) || []">
                    <option value="" selected>--No Selection--</option>
                  </select>
                  
                  <!-- PermittedValues + AllowsLists + Main Function Required -->
                <div ng-if="getPermittedValuesWithName(item) && item.allowsLists" ng-repeat="arg in item.value track by $index">
                  <select required
                  ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container="body" ng-options="t as t for t in getPermittedValuesWithName(item) || []">
                  </select>
                  <button style="border:none;background:none;" ng-if="item.value.length > 0" ng-click="removeColumnArgument(item,$index)"
                    title="Remove Column">
                    <!--  && multiColumnNamesCheck(item)" -->
                    <span class="glyphicon glyphicon-minus-sign orange"></span>
                  </button>
                </div>                                   
              </td>
            </tr>

          </tbody>
        </table>
        <!-- MAIN FUNCTION REQUIRED END -->
        <!-- PARTNER FUNCTION REQUIRED START -->
        <h5 ng-show=config.function.hasPartnerFunction>{{config.function.partnerFunction.function_alias_name}}'s arguments</h5>
        <table ng-if="config.function.hasPartnerFunction" class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">

          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
              <!--<th>Message</th>-->
            </tr>
          </thead>

          <tbody ng-show="shouldRender()">
            <tr ng-if="shouldShowPartitionOrderFields(config.function.partnerFunction.unaliased_inputs)">
              <td>Unaliased Input Tables</td>
              <td>
                <select required multiple size="8" ng-model="config.function.partnerFunction.unaliased_inputs.values" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs"
                  data-toggle="tooltip" data-container="body" data-placement="right" data-html="true" title="<b>(Ctrl+Click to multi-select)</b>">
                  </select>
              </td>
            </tr>

            <tr ng-repeat="item in config.function.partnerFunction.required_input" ng-model="config.function.partnerFunction.required_input" ng-if="item.hasOwnProperty('name') && item.isRequired">
              <td style="text-transform: capitalize">{{ cleanName(item.name) }} {{ cleanKind(item.kind) }}</td>
              <td>
                <!-- <select required ng-model="item.value" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs">
                      <option value="" selected>--No Selection--</option>
                  </select> -->
                  <span>{{config.function.function_alias_name}}'s output</span>
                  <!-- Input Kind Required -->
                <div class="inner-cell" ng-if="item.inputKindChoices.length > 1">
                  <p class="inner-label">Partition Type </p>
                  <select ng-model="item.kind">
                      <option value="None">None</option>
                      <option value="PartitionByKey">Partition</option>
                      <option value="HashByKey">Hash</option>
                      <option ng-if="item.inputKindChoices.includes('Dimension')" value="Dimension">Dimension</option>
                  </select>
                </div>

                <div class="inner-cell" ng-show="'PartitionByKey' == item.kind">
                  <p class="inner-label">Partition by 
                      <button style="border:none;background:none;" ng-init="item.partitionAttributes = initializeColumnArray(item.partitionAttributes)" ng-click="addPartitionByColumn_TEST(item.partitionAttributes)" title="Add Partition Column">
                        <span class="glyphicon glyphicon-plus-sign orange"></span></button>
                  </p>
                  <div ng-if="'PartitionByKey' == item.kind" ng-repeat="col in item.partitionAttributes track by $index ">
                      <span ng-show="'PartitionByKey' == item.kind">PARTITION BY column {{$index+1}}</span>
                      <div>
                          <!-- <select  required ng-model="item.partitionAttributes[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                          data-html="true" title="<b>(Ctrl+Click to multi-select)</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <option value="" selected>--No Selection--</option>
                        </select> -->
                            <input required ng-model="item.partitionAttributes[$index]" 
                            data-html="true" title="<b>(Ctrl+Click to multi-select)</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">
                            <button style="border:none;background:none;" ng-if="item.partitionAttributes.length > 1" ng-click="removePartitionByColumn_TEST(item.partitionAttributes,$index)"
                              title="Remove Script Argument">
                              <span class="glyphicon glyphicon-minus-sign orange"></span>
                            </button>
                      </div>
                    </div>
                </div>
                
                <div class="inner-cell">
                  <p class="inner-label">Order by 
                      <button style="border:none;background:none;" ng-init="item.orderByColumn = initializeColumnArray(item.orderByColumn); item.orderByColumnDirection = initializeColumnArray(item.orderByColumnDirection)" ng-click="addOrderByColumn_WITHDIR(item.orderByColumn, item.orderByColumnDirection)" title="Add Order BY Column"><span class="glyphicon glyphicon-plus-sign orange"></span></button>
                  </p>
                  <!-- Is Ordered -->
                    <div ng-if="item.isOrdered" ng-repeat="col in item.orderByColumn track by $index ">
                        <span ng-show="item.isOrdered">ORDER BY column {{$index+1}}</span>                        
                        <div >
                            <!-- <select required ng-model="item.orderByColumn[$index]"
                            ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                            data-html="true" title="<b>Select an ORDER BY Column</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">
                            <option value="" selected>--No Selection--</option>
                          </select> -->
                          <input required ng-model="item.orderByColumn[$index]"                          
                          data-html="true" title="<b>Select an ORDER BY Column</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <span>
                            <select class="orderbyselect" ng-model="item.orderByColumnDirection[$index]"                            
                            title="<b>Select which direction the of this ORDER BY Clause</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">                            
                            <option value="" selected>ASC</option>
                            <option value="DESC">DESC</option>
                          </select>
                          </span>
                              <button style="border:none;background:none;" ng-if="item.orderByColumn.length > 1" ng-click="removeOrderByColumn_WITHDIR(item.orderByColumn, item.orderByColumnDirection, $index)"
                                title="Remove Script Argument">
                                <span class="glyphicon glyphicon-minus-sign orange"></span>
                              </button>
                        </div>                   
                    </div>
                  <!-- Is Ordered -->
                    <div ng-if="!item.isOrdered" ng-repeat="col in item.orderByColumn track by $index ">
                        <span ng-show="!item.isOrdered">ORDER BY column {{$index+1}}</span>                        
                        <div >
                            <!-- <select required ng-model="item.orderByColumn[$index]"
                            ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                            data-html="true" title="<b>Select an ORDER BY Column</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">
                            <option value="" selected>--No Selection--</option>
                          </select> -->
                          <input ng-model="item.orderByColumn[$index]"                          
                          data-html="true" title="<b>Select an ORDER BY Column</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <span>
                            <select class="orderbyselect" ng-model="item.orderByColumnDirection[$index]"                            
                            title="<b>Select which direction the of this ORDER BY Clause</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">                            
                            <option value="" selected>ASC</option>
                            <option value="DESC">DESC</option>
                          </select>
                          </span>
                              <button style="border:none;background:none;" ng-if="item.orderByColumn.length > 1" ng-click="removePartitionByColumn_TEST(item.orderByColumn,$index)"
                                title="Remove Script Argument">
                                <span class="glyphicon glyphicon-minus-sign orange"></span>
                              </button>
                        </div>                   
                    </div>
                </div>

              </td>
            </tr>

            <tr ng-if="config.function.partnerFunction.isOrdered && shouldShowPartitionOrderFields(config.function.partnerFunction.unaliased_inputs)">
              <td>ORDER BY Column
                  <button style="border:none;background:none;" ng-click="addOrderByColumn()" title="Add ORDER BY Column"><span class="glyphicon glyphicon-plus-sign orange"></span></button>
              </td>
              <td>
                  <div ng-repeat="col in config.function.partnerFunction.orderByColumn track by $index ">
                      <span>ORDER BY column {{$index+1}}</span>                    
                      <div>
                          <!-- <select required ng-model="config.function.partnerFunction.orderByColumn[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in getSchemaOfUnaliasedInputs(config.function.partnerFunction.unaliased_inputs)"
                          data-html="true" title="<b>Select an ORDER BY column</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <option value="" selected>--No Selection--</option>
                        </select> -->
                        <input required ng-model="config.function.partnerFunction.orderByColumn[$index]"                        
                        data-html="true" title="<b>Select an ORDER BY column</b>" data-toggle="tooltip" data-container="body"
                        data-placement="right">
                        <span>
                          <select class="orderbyselect" ng-model="config.function.partnerFunction.orderByColumnDirection[$index]"                            
                          title="<b>Select which direction the of this ORDER BY Clause</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <!-- <option value="" selected>--No Selection--</option> -->
                          <option value="" selected>ASC</option>
                          <option value="DESC">DESC</option>
                        </select>
                        </span>
                            <button style="border:none;background:none;" ng-if="config.function.partnerFunction.orderByColumn.length > 1" ng-click="removeOrderByColumn($index)"
                              title="Remove Script Argument">
                              <span class="glyphicon glyphicon-minus-sign orange"></span>
                            </button>
                      </div>
               
                  </div>
              </td>
              <!--<td>{{ validation_message('orderByColumn') }}</td>-->
            </tr>

            <tr ng-if="shouldShowPartitionOrderFields(config.function.partnerFunction.unaliased_inputs) && config.function.partnerFunction.partitionInputKind.indexOf('PartitionByAny') !== -1 && config.function.partnerFunction.partitionInputKind.length > 1">
              <td>PARTITION BY ANY</td>
              <td>
                <input type="checkbox" ng-model="config.function.partnerFunction.partitionByAny"></input>
              </td>
            </tr>

            <tr ng-if="shouldShowPartitionOrderFields(config.function.partnerFunction.unaliased_inputs) && config.function.partnerFunction.partitionInputKind.indexOf('PartitionByKey') !== -1">
              <td>PARTITION BY Column
                  <button style="border:none;background:none;" ng-disabled="config.function.partnerFunction.partitionByAny" ng-click="addPartitionByColumn()" title="Add Partition Column"><span class="glyphicon glyphicon-plus-sign orange"></span></button>
              </td>
              <td>
                  <div ng-repeat="col in config.function.partnerFunction.partitionAttributes track by $index ">                     
                      <span>PARTITION BY column {{$index+1}}</span>
                      <div>
                        <!-- Left unchanged, please change if it breaks something -->
                          <select required ng-disabled="config.function.partnerFunction.partitionByAny" ng-model="config.function.partnerFunction.partitionAttributes[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in getSchemaOfUnaliasedInputs(config.function.partnerFunction.unaliased_inputs)"
                          data-html="true" title="<b>(Ctrl+Click to multi-select)</b>" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <option value="" selected>--No Selection--</option>
                        </select>
                            <button style="border:none;background:none;" ng-if="config.function.partnerFunction.partitionAttributes.length > 1" ng-click="removePartitionByColumn($index)"
                              title="Remove Script Argument">
                              <span class="glyphicon glyphicon-minus-sign orange"></span>
                            </button>
                      </div>                  
                        </div>     
              </td>
            </tr>
            <!-- Added output_table stuff -->
            <tr ng-repeat="item in config.function.partnerFunction.output_tables" ng-model="config.function.partnerFunction.output_tables" ng-if="item.isRequired">
              <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}</td>
              <td>
                <input required type="text" ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" />
                <span style="padding-left:30px" >This same table name must be entered into the <strong>Input / Output</strong> tab above as an Output.</span>  
              </td>
            </tr>


            <tr ng-repeat="item in config.function.partnerFunction.arguments" ng-model="config.function.partnerFunction.arguments" ng-if="item.isRequired && useNativeOrNot(item.inNative)">
              <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}
                <!-- Button for multi columns -->
                <button ng-if="multiColumnNamesCheck(item) && !getPermittedValuesWithName(item)"
                style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Column">
                 <span class="glyphicon glyphicon-plus-sign orange"></span>
               </button>

               <!-- Button for  string permitted values-->
               <button ng-if="getPermittedValuesWithName(item) && item.allowsLists"
                style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Value">
                 <span class="glyphicon glyphicon-plus-sign orange"></span>
               </button>
              </td>
              <td>
                <input required type="text" ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" />

                <input required class="teradata-tags" param-name="{{item.name}}" ng-model="item.value" type="text" ng-if="['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 && item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right"></input>

                <input type="checkbox" ng-model="item.value" ng-if="item.datatype == 'BOOLEAN'" data-toggle="tooltip" data-container="body"
                  data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right" />

                <!-- <select required ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)">
                    <option value="" selected>--No Selection--</option>
                  </select> -->

                  <input required type='text'
                  placeholder='Add Parameter'                     
                  list='item{{item.name}}'    
                  ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" 
                  data-html="true" 
                  title="{{ getArgumentDescriptionWithName(item.name) }}"
                  ng-model="item.value"
                  
                  data-placement="right" data-container="body" >      
                  <datalist id="item{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>

                    <!-- REMOVED POTENTIAL ERRONEOUS CODE -->
                  <!-- <select required ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container="body" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)">
                  </select> -->

                <!-- <select required multiple  size="8" ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container="body" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)">
                  </select> -->
                  <!-- <input required type='text'
                        placeholder='Add Parameter'                     
                        list='{{item.name}}'    
                        ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"   
                        data-toggle="tooltip" 
                        data-html="true" 
                        title="{{ getArgumentDescriptionWithName(item.name) }}"
                        ng-model="item.value"
                        ng-change="testPrint(test_model)"
                        data-placement="right" data-container="body" >      
                  <datalist id="{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>      -->

                  <div ng-repeat="col in item.value track by $index" ng-if="multiColumnNamesCheck(item) && item.isRequired && item.allowsLists && !getPermittedValuesWithName(item)">
                    <!-- <select required
                    ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" data-container=body ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)">
                        <option value="" selected>--No Selection--</option>
                    </select>                       -->

                        <input required type='text'
                      placeholder='Add Parameter'                     
                      list='item{{item.name}}'    
                      
                      data-toggle="tooltip" 
                      data-html="true" 
                      title="{{ getArgumentDescriptionWithName(item.name) }}"
                      ng-model="item.value[$index]"
                      
                      data-placement="right" data-container="body" >      
                      <datalist id="item{{item.name}}">
                          <option ng-repeat="column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                      </datalist>


                    <button style="border:none;background: none;" ng-if="item.value.length > 1" ng-click="removeColumnArgument(item,$index)" title="Remove RETURNS Column">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>

                <select required ng-if="item.datatype == 'TABLE_NAME' && !isArgumentOutputTable(item) && !getPermittedValuesWithName(item)" ng-model="item.value"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs">
                    <option value="" selected>--No Selection--</option>
                  </select>

                <select required ng-if="getPermittedValuesWithName(item) && !item.allowsLists" ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true"
                  title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right" ng-options="t as t for t in getPermittedValuesWithName(item) || []">
                    <option value="" selected>--No Selection--</option>
                  </select>
                  
                  <!-- PermittedValues + AllowsLists + Partner Function Required -->
                <div ng-if="getPermittedValuesWithName(item) && item.allowsLists" ng-repeat="arg in item.value track by $index">
                 <select required ng-if="getPermittedValuesWithName(item) && item.allowsLists"
                  ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container="body" ng-options="t as t for t in getPermittedValuesWithName(item) || []">
                  </select>
                  <button style="border:none;background:none;" ng-if="item.value.length > 0" ng-click="removeColumnArgument(item,$index)"
                    title="Remove Column">
                    <!--  && multiColumnNamesCheck(item)" -->
                    <span class="glyphicon glyphicon-minus-sign orange"></span>
                  </button>
                  </div>
                  
              </td>
            </tr>

          </tbody>
        </table>
        <!-- PARTNER FUNCTION REQUIRED END -->

      </div>
      
      <div id="tabs-optional" class="plugintabcontent" ng-if="hasOptionalArguments()">
        <!-- MAIN FUNCTION OPTIONAL START -->
        <h5 ng-show=config.function.hasPartnerFunction>{{config.function.function_alias_name}}'s arguments</h5>
        <table class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">

          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
            </tr>
          </thead>

          <tbody ng-show="shouldRender()">
            <tr ng-repeat="item in config.function.required_input" ng-model="config.function.required_input" ng-if="item.hasOwnProperty('name') && !item.isRequired">
              <td style="text-transform: capitalize">{{ cleanName(item.name) }} {{ cleanKind(item.kind) }}</td>
              <td>
                <select ng-model="item.value" ng-options="inputtable.fullName.split('.')[1] as inputtable.fullName.split('.')[1] for inputtable in inputs">
                    <option value="" selected>--No Selection--</option>
                  </select>
                  

                <div class="inner-cell" ng-show="item.kind.includes('ByKey')">
                  <p class="inner-label" ng-show="item.kind == 'PartitionByKey'">Partition by
                      <button style="border:none;background:none;" ng-init="item.partitionAttributes = initializeColumnArrayOptional(item.partitionAttributes)"ng-click="addPartitionByColumn_TEST(item.partitionAttributes)" title="Add Partition Column">
                        <span class="glyphicon glyphicon-plus-sign orange"></span>
                      </button>
                  </p>
                  <p class="inner-label" ng-show="item.kind == 'HashByKey'">Hash by 
                      <button style="border:none;background:none;" ng-init="item.partitionAttributes = initializeColumnArrayOptional(item.partitionAttributes)" ng-click="addPartitionByColumn_TEST(item.partitionAttributes)" title="Add Partition Column">
                        <span class="glyphicon glyphicon-plus-sign orange"></span></button>
                  </p>
                  <div ng-show="item.kind.includes('ByKey')" ng-repeat="col in item.partitionAttributes track by $index ">
                      <span ng-show="'PartitionByKey' == item.kind">Column {{$index+1}}</span>
                      <span ng-show="'HashByKey' == item.kind">Column {{$index+1}}</span>
                      <div>

                          <select ng-model="item.partitionAttributes[$index]"
                          ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                          data-html="true" title="{{ getToolTip(item.kind != 'HashByKey' ? 'PARTITION_BY' : 'HASH_BY') }}" data-toggle="tooltip" data-container="body"
                          data-placement="right">
                          <option value="" selected>--No Selection--</option>
                        </select>
                            <button style="border:none;background:none;" ng-if="item.partitionAttributes.length > 1" ng-click="removePartitionByColumn_TEST(item.partitionAttributes,$index)"
                              title="Remove Script Argument">
                              <span class="glyphicon glyphicon-minus-sign orange"></span>
                            </button>
                      </div>
               
                  </div>
                </div>

                <div class="inner-cell" ng-show="item.isOrdered">
                  <p class="inner-label">Order by
                      <button style="border:none;background:none;" ng-init="item.orderByColumn = initializeColumnArrayOptional(item.orderByColumn); item.orderByColumnDirection = initializeColumnArrayOptional(item.orderByColumnDirection)" ng-click="addPartitionByColumn_TEST(item.orderByColumn)" title="Add Order BY Column">
                        <span class="glyphicon glyphicon-plus-sign orange"></span></button>
                  </p>
                    <div ng-repeat="col in item.orderByColumn track by $index ">
                        <span>ORDER BY column {{$index+1}}</span>                        
                        <div>
                            <select ng-model="item.orderByColumn[$index]"
                            ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                            title="{{ getToolTip(item.kind != 'HashByKey' ? 'ORDER_BY' : 'LOCAL_ORDER_BY') }}" data-toggle="tooltip" data-container="body"
                            data-placement="right">
                            <option value="" selected>--No Selection--</option>
                          </select>
                          <span>
                          <select class="orderbyselect"  ng-model="item.orderByColumnDirection[$index]"                            
                          title="{{getToolTip('SEQUENCING_TYPE')}}" data-toggle="tooltip" data-container="body"
                          data-placement="right">                          
                          <option value="" selected>ASC</option>
                          <option value="DESC">DESC</option>
                        </select>
                        </span>
                              <button style="border:none;background:none;" ng-if="item.orderByColumn.length > 1" ng-click="removePartitionByColumn_TEST(item.orderByColumn,$index)"
                                title="Remove Script Argument">
                                <span class="glyphicon glyphicon-minus-sign orange"></span>
                              </button>
                        </div>
                 
                    </div>
                </div>
              </td>
            </tr>
            <!-- Output tables -->
            <tr ng-show="false" ng-repeat="item in config.function.output_tables" ng-model="config.function.output_tables" ng-if="!item.isRequired">
              <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}</td>
              <td>
                <input type="text" ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" />
                <span style="padding-left:30px" >This same table name must be entered into the <strong>Input / Output</strong> tab above as an Output.</span>
              </td>
            </tr>

            
            
            <tr ng-repeat="item in config.function.arguments" ng-model="config.function.arguments" ng-if="!item.isRequired && useNativeOrNot(item.inNative) && !item.datatype.startsWith('GROUP')">
              <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}
                <!-- Button for multi columns-->
                <button ng-if="multiColumnNamesCheck(item) && !getPermittedValuesWithName(item)"
                 style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Column">
                  <span class="glyphicon glyphicon-plus-sign orange"></span>
                </button>
                
                <!-- Button for string permitted values-->
               <button ng-if="getPermittedValuesWithName(item) && item.allowsLists"
               style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Value">
                <span class="glyphicon glyphicon-plus-sign orange"></span>
              </button>
              
              </td>
              <td>
                <!-- SKS: Support for validating numeric types, with Min and Max and Step attributes, previous was type="text" and no min, max or step -->
                <input 
                       type="{{['DOUBLE','INTEGER', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? 'number' : 'text'}}" 
                       min ="{{['DOUBLE','INTEGER', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? getLowerBoundValuesWithName(item) : ''}}"
                       max ="{{['DOUBLE','INTEGER', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? getUpperBoundValuesWithName(item) : ''}}"
                       step ="{{['DOUBLE', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 ? getStepRangeValuesWithName(item) : '1'}}"

                    ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                    data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" />

                <input class="teradata-tags" param-name="{{item.name}}" ng-model="item.value" type="text" ng-if="['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 && item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right"></input>

                <input type="checkbox" ng-model="item.value" ng-if="item.datatype == 'BOOLEAN' && !getPermittedValuesWithName(item)" data-toggle="tooltip"
                  data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right"
                />

                <!-- <select ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)">
                    <option value="" selected>--No Selection--</option>
                  </select> -->

                  <input type='text'
                  ng-change=" item.value = validateColumnName(item, item.value, getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)) "
                  ng-model-options="{updateOn : 'change'}"
                  placeholder='Add Parameter'                     
                  list='item{{item.name}}'    
                  ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" 
                  data-html="true" 
                  title="{{ getArgumentDescriptionWithName(item.name) }}"
                  ng-model="item.value"
                  
                  data-placement="right" data-container="body" >      
                  <datalist id="item{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>

                <!-- <select multiple size="8"  ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                  ng-model="item.value" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container=body ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)">
                  </select> -->
                  <div ng-repeat="col in item.value track by $index" ng-if="multiColumnNamesCheck(item)"> 
                    <!--  -->
                    <!-- <select 
                    ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" data-container=body ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)">
                        <option value="" selected>--No Selection--</option>
                    </select>          -->
                    
                    <input type='text'
                  ng-change=" item.value[$index] = validateColumnName(item, item.value[$index], getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)) "
                  ng-model-options="{updateOn : 'change'}"
                  placeholder='Add Parameter'                     
                  list='item{{item.name}}'    
                  ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" 
                  data-html="true" 
                  title="{{ getArgumentDescriptionWithName(item.name) }}"
                  ng-model="item.value[$index]"
                  
                  data-placement="right" data-container="body" >      
                  <datalist id="item{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>

                    <span ng-if="item.value.length == 0">No columns added, click the + button to add a column</span>
                    <button style="border:none;background:none;" ng-if="item.value.length > 0" ng-click="removeColumnArgument(item,$index)"
                      title="Remove Column">
                      <!--  && multiColumnNamesCheck(item)" -->
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>
                  <!-- <input required type='text'
                        placeholder='Add Parameter'                     
                        list='{{item.name}}'    
                        ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                        data-toggle="tooltip" 
                        data-html="true" 
                        title="{{ getArgumentDescriptionWithName(item.name) }}"
                        ng-model="item.value"
                        ng-change="testPrint(test_model)"
                        data-placement="right" data-container="body" >      
                  <datalist id="{{item.name}}">
                      <option ng-repeat="column in getSchema(item, config.function.required_input, config.function.unaliased_inputs, config.function.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>  -->

                <select ng-if="item.datatype == 'TABLE_NAME' && !isArgumentOutputTable(item) && !getPermittedValuesWithName(item)" ng-model="item.value"
                  data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                  data-placement="right" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs">
                    <option value="" selected>--No Selection--</option>
                  </select>

                <select ng-if="getPermittedValuesWithName(item) && !item.allowsLists" ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true"
                  title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right" ng-options="t as t for t in getPermittedValuesWithName(item)">
                    <option value="" selected>--No Selection--</option>
                  </select>
                 
                  <!-- PermittedValues + AllowsLists + Main Function Optional -->
                <div ng-if="getPermittedValuesWithName(item) && item.allowsLists" ng-repeat="arg in item.value track by $index">
                <select ng-if="getPermittedValuesWithName(item) && item.allowsLists"
                  ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                  data-placement="right" data-container="body" ng-options="t as t for t in getPermittedValuesWithName(item)">
                  </select>
                  <button style="border:none;background:none;" ng-if="item.value.length > 0" ng-click="removeColumnArgument(item,$index)"
                    title="Remove Column">
                    <!--  && multiColumnNamesCheck(item)" -->
                    <span class="glyphicon glyphicon-minus-sign orange"></span>
                  </button>
                  </div>

              </td>
            </tr>
          </tbody>

        </table>
        <!-- MAIN FUNCTION OPTIONAL END -->
        <!-- PARTNER FUNCTION OPTIONAL START -->
        <h5 ng-show=config.function.hasPartnerFunction>{{config.function.partnerFunction.function_alias_name}}'s arguments</h5>
        <table ng-if="config.function.hasPartnerFunction && hasOptionalArguments_Partner()" class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">

            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
              </tr>
            </thead>
        
            <tbody ng-show="shouldRender()">
              <tr ng-repeat="item in config.function.partnerFunction.required_input" ng-model="config.function.partnerFunction.required_input" ng-if="item.hasOwnProperty('name') && !item.isRequired">
                <td style="text-transform: capitalize">{{ cleanName(item.name) }} {{ cleanKind(item.kind) }}</td>
                <td>
                  <select ng-model="item.value" ng-options="inputtable.fullName.split('.')[1] as inputtable.fullName.split('.')[1] for inputtable in inputs">
                      <option value="" selected>--No Selection--</option>
                    </select>
                    
                    <!-- Input Kind Required -->

                <div class="inner-cell" ng-if="item.inputKindChoices.length > 1">
                  <p class="inner-label">Partition Type </p>
                  <select ng-model="item.kind">
                      <option value="None">None</option>
                      <option value="PartitionByKey">Partition</option>
                      <option value="HashByKey">Hash</option>
                      <option ng-if="item.inputKindChoices.includes('Dimension')" value="Dimension">Dimension</option>
                  </select>
                </div>
        
                  <div class="inner-cell" ng-show="'PartitionByKey' == item.kind">
                    <p class="inner-label">Partition by
                        <button style="border:none;background:none;" ng-init="item.partitionAttributes = initializeColumnArrayOptional(item.partitionAttributes)"ng-click="addPartitionByColumn_TEST(item.partitionAttributes)" title="Add Partition Column">
                          <span class="glyphicon glyphicon-plus-sign orange"></span>
                        </button>
                    </p>
                     <div ng-repeat="col in item.partitionAttributes track by $index ">
                        <span>PARTITION BY column {{$index+1}}</span>                        
                        <div>
                            <select ng-model="item.partitionAttributes[$index]"
                            ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                            data-html="true" title="<b>(Ctrl+Click to multi-select)</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">
                            <option value="" selected>--No Selection--</option>
                          </select>
                              <button style="border:none;background:none;" ng-if="item.partitionAttributes.length > 1" ng-click="removePartitionByColumn_TEST(item.partitionAttributes,$index)"
                                title="Remove Script Argument">
                                <span class="glyphicon glyphicon-minus-sign orange"></span>
                              </button>
                        </div>
                 
                    </div>
                  </div>
        
                  <div class="inner-cell" ng-show="item.isOrdered">
                    <p class="inner-label">Order by
                        <button style="border:none;background:none;" ng-init="item.orderByColumn = initializeColumnArrayOptional(item.orderByColumn); item.orderByColumnDirection = initializeColumnArrayOptional(item.orderByColumnDirection)" ng-click="addPartitionByColumn_TEST(item.orderByColumn)" title="Add Order BY Column">
                          <span class="glyphicon glyphicon-plus-sign orange"></span></button>
                    </p>
                      <div ng-repeat="col in item.orderByColumn track by $index ">
                          <span>ORDER BY column {{$index+1}}</span>                        
                          <div>
                              <select ng-model="item.orderByColumn[$index]"
                              ng-options="column.name as column.name + ' (' + (column.type || 'Column') + ')' for column in inputschemas[item.value]"
                              data-html="true" title="<b>Select ORDER BY Column</b>" data-toggle="tooltip" data-container="body"
                              data-placement="right">
                              <option value="" selected>--No Selection--</option>
                            </select>
                            <span>
                            <select class="orderbyselect"  ng-model="item.orderByColumnDirection[$index]"                            
                            title="<b>Select which direction the of this ORDER BY Clause</b>" data-toggle="tooltip" data-container="body"
                            data-placement="right">                          
                            <option value="" selected>ASC</option>
                            <option value="DESC">DESC</option>
                          </select>
                          </span>
                                <button style="border:none;background:none;" ng-if="item.orderByColumn.length > 1" ng-click="removePartitionByColumn_TEST(item.orderByColumn,$index)"
                                  title="Remove Script Argument">
                                  <span class="glyphicon glyphicon-minus-sign orange"></span>
                                </button>
                          </div>
                   
                      </div>
                  </div>
                </td>
              </tr>
              <!-- Output tables -->
              <tr ng-show="false" ng-repeat="item in config.function.partnerFunction.output_tables" ng-model="config.function.partnerFunction.output_tables" ng-if="!item.isRequired">
                <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}</td>
                <td>
                  <input type="text" ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                    data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" />
                  <span style="padding-left:30px" >This same table name must be entered into the <strong>Input / Output</strong> tab above as an Output.</span>
                </td>
              </tr>
        
              
              
              <tr ng-repeat="item in config.function.partnerFunction.arguments" ng-model="config.function.partnerFunction.arguments" ng-if="!item.isRequired && useNativeOrNot(item.inNative)">
                <td style="text-transform: capitalize">{{ getArgumentFormattedName(item.name) }}
                  <!-- Button for columns -->
                  <button ng-if="multiColumnNamesCheck(item) && !getPermittedValuesWithName(item)"
                   style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Column">
                    <span class="glyphicon glyphicon-plus-sign orange"></span>
                  </button>
                  
                   <!-- Button for string permitted values-->
                    <button ng-if="getPermittedValuesWithName(item) && item.allowsLists"
                    style="border:none;background:none;" ng-click="addColumnArgument(item)" title="Add Value">
                      <span class="glyphicon glyphicon-plus-sign orange"></span>
                    </button>
                
                </td>
                <td>
                  <input type="text" ng-model="item.value" ng-if="(['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 || (item.datatype == 'TABLE_NAME' && isArgumentOutputTable(item))) && !item.allowsLists && !getPermittedValuesWithName(item)"
                    data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" />
        
                  <input class="teradata-tags" param-name="{{item.name}}" ng-model="item.value" type="text" ng-if="['STRING','DOUBLE','INTEGER','DRIVER','SQLEXPR', 'LONG', 'DOUBLE PRECISION'].indexOf(item.datatype) >= 0 && item.allowsLists && !getPermittedValuesWithName(item)"
                    data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right"></input>
        
                  <input type="checkbox" ng-model="item.value" ng-if="item.datatype == 'BOOLEAN' && !getPermittedValuesWithName(item)" data-toggle="tooltip"
                    data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right"
                  />
        
                  <!-- <select ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                    ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)">
                      <option value="" selected>--No Selection--</option>
                    </select> -->
                    <input type='text' 
                  placeholder='Add Parameter'                     
                  list='item{{item.name}}'    
                  ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && !item.allowsLists && !getPermittedValuesWithName(item)"
                  data-toggle="tooltip" 
                  data-html="true" 
                  title="{{ getArgumentDescriptionWithName(item.name) }}"
                  ng-model="item.value"
                  
                  data-placement="right" data-container="body" >      
                  <datalist id="item{{item.name}}">
                      <option ng-repeat="config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                  </datalist>
        
                  <!-- <select multiple size="8"  ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                    ng-model="item.value" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}<br><br><b>(Ctrl+Click to multi-select)</b>"
                    data-placement="right" data-container=body ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)">
                    </select> -->
                    <div ng-repeat="col in item.value track by $index" ng-if="multiColumnNamesCheck(item)"> 
                      <!--  -->
                      <!-- <select 
                      ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                      data-placement="right" data-container=body ng-options="column.name as column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')' for column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)">
                          <option value="" selected>--No Selection--</option>
                      </select>                       -->

                      <input type='text' 
                      placeholder='Add Parameter'                     
                      list='item{{item.name}}{{$index}}'    
                      ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                      data-toggle="tooltip" 
                      data-html="true" 
                      title="{{ getArgumentDescriptionWithName(item.name) }}"
                      ng-model="item.value[$index]"                      
                      data-placement="right" data-container="body" >      
                      <datalist id="item{{item.name}}{{$index}}">
                          <option ng-repeat="config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                      </datalist>

                      <span ng-if="item.value.length == 0">No columns added, click the + button to add a column</span>
                      <button style="border:none;background:none;" ng-if="item.value.length > 0" ng-click="removeColumnArgument(item,$index)"
                        title="Remove Column">
                        <!--  && multiColumnNamesCheck(item)" -->
                        <span class="glyphicon glyphicon-minus-sign orange"></span>
                      </button>
                    </div>
                    <!-- <input required type='text'
                          placeholder='Add Parameter'                     
                          list='{{item.name}}'    
                          ng-if="(item.datatype == 'COLUMN_NAMES' || item.datatype == 'COLUMNS') && item.allowsLists && !getPermittedValuesWithName(item)"
                          data-toggle="tooltip" 
                          data-html="true" 
                          title="{{ getArgumentDescriptionWithName(item.name) }}"
                          ng-model="item.value"
                          ng-change="testPrint(test_model)"
                          data-placement="right" data-container="body" >      
                    <datalist id="{{item.name}}">
                        <option ng-repeat="column in getSchema(item, config.function.partnerFunction.required_input, config.function.partnerFunction.unaliased_inputs, config.function.partnerFunction.arguments)" value="{{column.name}}">{{column.tableName + '.' + column.name + ' (' + (column.type || 'Column') + ')'}}</option>    
                    </datalist>  -->
        
                  <select ng-if="item.datatype == 'TABLE_NAME' && !isArgumentOutputTable(item) && !getPermittedValuesWithName(item)" ng-model="item.value"
                    data-toggle="tooltip" data-container="body" data-html="true" title="{{ getArgumentDescriptionWithName(item.name) }}"
                    data-placement="right" ng-options="t.fullName.split('.')[1] as t.fullName.split('.')[1] for t in inputs">
                      <option value="" selected>--No Selection--</option>
                    </select>
        
                  <select ng-if="getPermittedValuesWithName(item) && !item.allowsLists" ng-model="item.value" data-toggle="tooltip" data-container="body" data-html="true"
                    title="{{ getArgumentDescriptionWithName(item.name) }}" data-placement="right" ng-options="t as t for t in getPermittedValuesWithName(item)">
                      <option value="" selected>--No Selection--</option>
                    </select>
                    
                    <!-- PermittedValues + AllowsLists + PartnerFunction Optional -->
                  <div ng-if="getPermittedValuesWithName(item) && item.allowsLists" ng-repeat="arg in item.value track by $index">
                    <select 
                    ng-model="item.value[$index]" data-toggle="tooltip" data-html="true" title="{{ getArgumentDescriptionWithName(item.name)}"
                    data-placement="right" data-container="body" ng-options="t as t for t in getPermittedValuesWithName(item)">
                    </select>

                    <button style="border:none;background:none;" ng-if="item.value.length > 0" ng-click="removeColumnArgument(item,$index)"
                      title="Remove Column">
                      <!--  && multiColumnNamesCheck(item)" -->
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>
                    
                </td>
              </tr>
            </tbody>
        
          </table>
          <span ng-if="config.function.hasPartnerFunction && !hasOptionalArguments_Partner()">Function has no Optional Arguments</span>
        <!-- PARTNER FUNCTION OPTIONAL END -->
      </div>

        <!-- Tab: Other SQL Arguments -->
        <div id="tabs-table" class="plugintabcontent">

          <table class="table table-condensed table-hover">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <!--<th>Message</th>-->
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>Modify Select Columns of Output Query</td>
                <td>
                  <div class="inner-cell">
                    <input type="checkbox" ng-model="config.function.customSelectClause" ng-change="resetSelectToStar()" data-toggle="tooltip"
                      title="{{ getArgumentDescription('SELECT_CUSTOM') }}" data-placement="right">
                    </input> Customize Select Columns
                  </div>
                  <textarea ng-readonly="!config.function.customSelectClause" rows="4" cols="200" ng-model="config.function.select_clause"
                    data-toggle="tooltip" title="{{ getArgumentDescription('SELECT_COLUMNS') }}" data-placement="right"></textarea>
                </td>
              </tr>
              <tr>
                <td>Additional Clauses
                  <button style="border:none;background:none;" ng-click="addAdditionalSQLClause()" title="Add RETURNS column">
                    <span class="glyphicon glyphicon-plus-sign orange"></span>
                  </button>
                </td>
                <td>
                  <div ng-repeat="val in config.function.additionalSQLClause track by $index">
                  <input id="ReturnsType" list="datatypes" ng-model="config.function.additionalSQLClause[$index]" type="text" data-container="body" data-html="true" data-placement="right"
                      data-toggle="tooltip" title="Title" />
                    <datalist id="datatypes">
                      <option value="WHERE search_condition">
                      <option value="HAVING search_condition">
                      <option value="QUALIFY search_condition">
                      <option value="ORDER BY expression ASC">
                      <option value="GROUP BY ">
                      <option value="SAMPLE N">                      
                    </datalist>
                    <button style="border:none;background:none;" ng-if="config.function.additionalSQLClause.length > 1" ng-click="removeAdditionalSQLClause($index)"
                      title="Remove RETURNS Column">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                    </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
    <!-- </div> -->


  </div>

</div>

</div>

<div id="dialog" data-html="true" title="Dialog" style="display: none">
  <pre class="content">Dialog</pre>
  <div class="other"></div>
</div>

<div id="dialog-validation" data-html="true" title="Invalid recipe inputs" style="display: none">
  <div class="content"></div>
</div>



<!-- <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Learn More...</h4>
            </div>
            <div class="modal-body">
                <iframe src="/plugins/TeradataVantageSQLEFunctionsPlugin/resource/documentation/document/20190619_book.pdf" height="100%" width="98%"></iframe>
            </div>
        </div>
    </div>
</div> -->
