<!-- Copyright Â© 2018 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="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" />
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
<link rel="stylesheet" href="/plugins/teradata/resource/css/glyphs.css">
<script src="/plugins/teradata/resource/js/teradata_sto.js"></script>

<div id="main-container">

  <div ng-controller="TeradataControllerScriptTO">

    <div class="control-group">
      <label class="control-label"  ng-if="!isVantageCloudLake">Function Name</label>
      <label class="control-label"  ng-if="isVantageCloudLake" >Application Name</label>

      <div class="controls" id="function_name">
        
        <p class="inner-label" ng-if="!isVantageCloudLake" >SCRIPT Table Operator</p>
        <a data-placement="right" data-html="true" data-toggle="tooltip" title="Click here to know more about Open Analytics Framework" target=”_blank” style="color:#101111;" href="https://docs.teradata.com/r/Teradata-VantageCloud-Lake/Analyzing-Your-Data/Build-Scalable-Analytics-with-Open-Analytics-Framework/Introduction-to-Vantage-Open-Analytics/What-is-Open-Analytics-Framework" class="inner-label" ng-if="isVantageCloudLake" ><u>Open Analytics Framework (OAF)</u></a>
        <a href ="https://www.dataiku.com/product/plugins/teradata" class="link1" target="_blank"><span class="glyphicon glyphicon-question-sign"></span></a>
        <!-- <a href="#" class="link1" data-toggle="modal" data-target="#basicModal"><span class="glyphicon glyphicon-question-sign"></span></a> -->
      </div>
    </div>

    <div class="control-group">
      <label class="control-label">Description</label>
      <div class="controls" style="max-width: 40%; text-align: justify">
        <p class="inner-label" ng-if="!isVantageCloudLake" >The SCRIPT Table Operator enables users to run Python and R scripts natively in the Analytics Database nodes.</p>
        <p class="inner-label" ng-if="isVantageCloudLake" >The APPLY Table Operator enables users to run Python scripts natively in the Analytics Database nodes.</p>
      </div>
    </div>

    <hr>
    <div class="control-group">

        <!-- Tab links -->
        <div class="tabplugin">
          <button  class="tablinks" ng-if="isVantageCloudLake" ng-click="openTabs($event, 'tabs-auth')"data-container="body" data-html="true" data-toggle="tooltip" title="Open Analytics Framework Authentication">OAF Authentication</button>

          <button  class="tablinks" id="tab2-btn" ng-if="isVantageCloudLake" ng-click="openSub($event, 'tabs-env')">User Environment</button>
          <button class="tablinks" ng-if="!isVantageCloudLake" ng-click="openTabs($event, 'tabs-loading')">Script Loading</button>
          <button class="tablinks" ng-if="!isVantageCloudLake" ng-click="openTabs($event, 'tabs-execution')">SCRIPT Arguments</button>
          <button  class="tablinks" id="tab3-btn" ng-if="isVantageCloudLake" ng-click="openTabs($event, 'tabs-execution')">APPLY Arguments</button>
          <button class="tablinks" ng-if="false" ng-click="openTabs($event, 'tabs-table')">Other SQL Arguments</button>
        </div>
    
        <div id="tabs-env" class="subtab">
        <div class="tabplugin">

                 <div class="tabplugin">
                  <button position="sticky" class="subtablinks" ng-click="openSubTabs($event, 'create-env')">Create</button>
                  <button position="sticky" class="subtablinks" ng-click="openSubTabs($event, 'manage-env')">Manage</button>
                  <button position="sticky" class="subtablinks" ng-click="openSubTabs($event, 'remove-env')">Remove</button>

                 </div>
        </div>

        </div>
         <!-- Tab: user authentication -->

         <div id="tabs-auth" class="plugintabcontent">
         
         <label for="ues_url">
          User Environment Service URL:
          </label>
          <input required type="text" id="ues_url" ng-model="config.ues_url"  data-placement="right" data-html="true" data-toggle="tooltip" title="Enter the UES URL">
         <br><br>
         <label for="pat_token">
          Personal Access Token:
          </label>
          <input required type="text" id="pat-token"  ng-required="config.ues_url" ng-model="config.pat_token"  data-placement="right" data-html="true" data-toggle="tooltip" title="Enter the PAT token generated through the CCP UI">
          <br><br>
          <label for="pvt_key">
          Private Key:
          </label>
            <select  id="pvt_key" ng-model="config.pvt_key"  data-container="body" data-placement="right"
            data-html="true" data-toggle="tooltip" title="Select a file from the DSS managed folder which contains the private key associated with the PAT token" ng-options="inputFile as inputFile for inputFile in fileList">
            <option  value="" disabled selected></option>
          </select>
          <br><br>

          <label for="exp_time">
           Expiration Time (sec):
           </label>
           <input required type="text" ng-required ="config.pat_token" id="exp_time" ng-model="config.exp_time" ng-init="config.exp_time = '3600'" data-placement="right" data-html="true" data-toggle="tooltip" title="Enter the expiration time in seconds.By default, you will need to re-authenticate after 1 hour.">
           
        <br>
        <br>
        <button data-placement="right" data-html="true" data-toggle="tooltip" ng-disabled="!config.exp_time || !config.pvt_key || !config.ues_url || !config.pat_token" ng-click="userAuthentication()" title="Click here to authenticate the user">Authenticate</button>
          </form>

         </div>
         <!-- End Tab: user authentication -->


        <!-- Tab: create environment -->

        <div id="create-env" class="subtabcontent">
        
        <label for="base_env">
        Base Environment:
        </label>
		    <select ng-model="config.base_env" id="base_env" dku-bs-select="{liveSearch:true}"  ng-options="v for v in choices" data-placement="right" data-html="true" data-toggle="tooltip" title="Choose from the existing base environments">
        </select>

		<br><br>
		
        <label for="env-name">
        Environment Name:
        </label>
        <input required type="text" id="env-name" ng-model="config.env_name" data-html="true" data-toggle="tooltip" title="Enter the environment name">
        <br><br>
        <label for="description">
        Description:
        </label>
        <input type="text" id="description" ng-model="config.des" data-placement="right" data-html="true" data-toggle="tooltip" title="Enter the purpose/description of the new environment">
        <br>
        <br>
        <button data-placement="right" data-html="true" data-toggle="tooltip" ng-click="createEnvironment()" title="Click here to create a new environment">Create</button>

        </div>
        <!-- End Tab: Create environment -->
        
        <!-- Tab: remove environment -->

        <div id="remove-env" class="subtabcontent">
        
        
        <label for="environment_name">
        Environment Name:
        </label>
		<select data-placement="right"  ng-model="config.environment_name" data-html="true" data-toggle="tooltip" title="Choose the environment you want to remove from the existing environments" id="environment_name" dku-bs-select="{liveSearch:true}" ng-options="v for v in names">
        <option  value="" disabled selected></option>
        </select>
        
		    <br><br>
        <button data-placement="right" data-html="true" data-toggle="tooltip" ng-click="confirmDelete()" title="Click here to remove an existing environment">Delete</button>
   
        </div>
        <!-- End Tab: Remove environment -->
        
        <!-- Tab:  Manage Environment -->

        
                
        </div>
        <!-- End Tab: Manage Environmment -->
         <!-- Tab: New management Tab -->
         <div id="manage-env" class="subtabcontent">
         <label for="environment_name">
         Environment Name:
         </label>
 		<select required ng-model="config.environment_name" id="environment_name" dku-bs-select="{liveSearch:true}" ng-options="v for v in names" data-placement="right" data-html="true" data-toggle="tooltip" title="Choose an environment from the existing environments">
         <option  value="" disabled selected></option>
         </select>
         <button ng-click="viewEnv()" data-placement="right" data-html="true" data-toggle="tooltip" title="Click here to view the details(name,description,base environment,installed libraries & files) of the selected environment"> View Details</button>
         <button ng-click="refreshEnv()" data-placement="right" data-html="true" data-toggle="tooltip" title="Click here to refresh the environment and reflect the changes(if any) done outside the scope of dataiku">Refresh</button>
         <br><br>
        
  
        <label for="claimId">Claim ID:</label>
        <input type="text" id="claimId"  ng-model="config.claim_id" data-placement="right" data-html="true" data-toggle="tooltip" title="Enter the Claim Id of the desired operation">
        
        <button id="statusBtn" ng-click="checkStatus()" data-placement="right" data-html="true" data-toggle="tooltip" title="Click here to view the status of the specified Claim Id.By default, it will return all the active Claim Ids along with the operation performed.">Status</button>
        <br><br>
         
        <table class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">

             <thead>
               <tr>
                 <th>Install Libraries</th>
                 <th>Update Libraries</th>
                 <th>Uninstall Libraries</th>
               </tr>
             </thead>

             <tbody>
               <tr>
                 <td>
                   <div class="inner-cell">
                         <div class="inner-label">
                         <label  for="lib" >
                         Library Name(s):
                         </label>
                         <input type="text" id="lib" ng-model="config.lib" data-placement="right" data-html="true" data-toggle="tooltip" title="Enter the library name in python format to install in the selected user environment">
                         <br><br>
                        <label class="inner-cell">OR Select File:</label>
 		             

                       <select  id="FileName" ng-model="config.req_lib"  data-container="body" data-placement="right"
                         data-html="true" data-toggle="tooltip" title="Select a requirements.txt file containing the desired library names" ng-options="inputFile as inputFile for inputFile in fileList">
                       <option value="" disabled selected></option>
                       </select>
                 		<br><br>

                        <button type="submit" ng-click="installLibs()">Install</button> 

                        </div>
                    
                   </div>
                   
                 <td>
                   <div class="inner-cell">
                     <form class="inner-label">
                     <label for="lib_name" >
                     Library Name:
                     </label>
             		 <select data-placement="right" ng-model="config.lib_name" id="lib_name" dku-bs-select="{liveSearch:true}" ng-options="v for v in libs" data-placement="right" data-html="true" data-toggle="tooltip" title="Choose the library you want to remove from the select user environments">
                     <option  value="" disabled selected></option>
                     </select>
                     
             		<br><br>
                    <button type="submit" ng-click="updateLibs()" data-placement="right" data-html="true" data-toggle="tooltip" title="Click here to update the select library from the user environment">Update</button>    
                    </form>
                    </div>
                    <td>
                      <div class="inner-cell">
                        <form class="inner-label" onsubmit="listLibs(); return false;">
                          <label  for="lib" >
                            Library Name:
                          </label>
                            <input type="text" id="lib" ng-model="config.lib_name" data-placement="right" data-html="true" data-toggle="tooltip" title="Enter the name(s) of the library in python format to uninstall from the selected user environment">
                          <br><br>
                          <label for="lib_name">
                          OR Select:
                          </label>
                          <select ng-model="config.lib_name" id="lib_name" dku-bs-select="{liveSearch:true}" ng-options="v for v in libs" data-placement="right"  data-html="true" data-toggle="tooltip" title="Choose the package you want to update in the selected user environments">
                          <option value="" disabled selected></option>

                          </select>
                        
                		   <br><br>
                       <button type="submit" ng-click="confirmLibuninstall()">Uninstall</button>    
                       </form>
                       </div>

                    
                   </div>

                   </div>
                 </td>
               </tr>
             </tbody>
           </table>
           <table class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">
             <thead>
               <tr> 
                 <th>Install Files</th>
                 <th>Uninstall Files</th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td>
                   <div class="inner-cell">
                    <label class="inner-cell" for="myfile">File Name:</label>

                    <select  id="FileName" ng-model="config.install_file_name"  data-container="body" data-placement="right"
                      data-html="true" data-toggle="tooltip" title="Select a file from the DSS managed folder to install in the selected user environment" ng-options="inputFile as inputFile for inputFile in fileList">
                      <option  value="" disabled selected></option>
                    </select>
             
                       <br><br>
                       <button type="submit" ng-click="installFiles()">Install</button>    
                 </td>
                 <td>
                   <div class="inner-cell">
                    </div>
                    <div class="inner-cell">
                      <form>
                      <label for="file_name">
                      File Name:
                      </label>
              		   <select  ng-model="config.uninstall_file_name" id="file_name" dku-bs-select="{liveSearch:true}" ng-options="v for v in files" data-placement="right" data-html="true" data-toggle="tooltip" title="Choose the file you want to remove from the selected user environments" >
                      <option  value="" disabled selected></option>
                      </select>
              		<br><br>
                     <button type="submit" ng-click="confirmFileuninstall()" data-placement="right" data-html="true" data-toggle="tooltip" title="Click here to remove the selected file from the user environment">Uninstall</button>    
                     </form>
                      
                    </div>
                   
                   </div>
                 </td>
               </tr>
             </tbody>
           </table>
           <p>
             <br>
             <br>
             <br>
           </p>
         </div>

         <!-- End Tab:  -->
        

         
        
        

        <!-- Tab: Script Loading Tab -->
        <div id="tabs-loading" class="plugintabcontent">
          <table class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">
            <thead>
              <tr> 
                <th>File Name</th>
                <th>File Details</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>

                  <div class="inner-cell" ng-if="config.function.script_location == 'cz'">
                    <p class="inner-label">Script File Name</p>
                    <select required id="ScriptFileName" ng-model="config.function.script_filename" ng-change="onFilenameChange()" data-container="body" data-placement="right"
                      data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('FILE_NAME') }}" ng-options="inputFile as inputFile for inputFile in fileList">
                      <option value="" selected>--No Selection--</option>
                    </select>
                  </div>
                </td>
                <td>
                  <div class="inner-cell">
                    <p class="inner-label">Script File Location</p>
                    <select id="ScriptFileLocation" ng-model="config.function.script_location" data-container="body" ng-change="onFileLocationChange()" data-placement="right"
                      data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('FILE_LOCATION') }}">
                      <option value="" selected>No file to upload</option>
                      <option value="cz">Dataiku Managed Folder</option>
                    </select>
                  </div>
                  <div class="inner-cell" ng-if="config.function.script_location!=''" >
                    <p class="inner-label">Script File Alias</p>
                    <input required id="ScriptFileAlias" ng-model="config.function.script_alias" type="text" data-container="body" data-html="true" data-placement="right"
                      data-toggle="tooltip" title="{{ getArgumentDescription('FILE_ALIAS') }}" />
                  </div>
                  <div class="inner-cell" ng-if="config.function.script_location!=''" >
                    <div class="inner-cell">
                      <p class="inner-label">Replace Script</p>
                      <input type="checkbox" ng-model="config.function.replace_script" data-toggle="tooltip" data-placement="right" title="{{ getArgumentDescription('REPLACE_SCRIPT') }}"></input> Replace Current Script
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <p>
            <br>
            <br>
            <br>
          </p>
          <div>
            <button ng-click="addMoreFilesClick()">Add More Files</button>
            <label ng-hide=" stoDatabase=='' " style="display: inline-block">&emsp;&emsp;&emsp;&emsp; Added files will be installed in the following path:
              <em>.&#47;{{stoDatabase}}&#47;&#60;filename&#62;</em>
            </label>
            <label ng-show=" connectionErrorMessage!='' "  style="color:red;display: inline-block">
            {{connectionErrorMessage}}
            </label>
             <label ng-show=" stoDatabase=='' " style="color:red;display: inline-block">&emsp;&emsp;&emsp;&emsp; 
              Error: Missing database search path for SCRIPT. To use this recipe, specify first a database name for the STO_DATABASE custom property in your connection settings. 
            </label>


          </div>
          <table class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">

            <thead>
              <tr>
                <th>File Name</th>
                <th>File Details</th>
              </tr>
            </thead>

            <tbody>
              <tr ng-repeat="file in config.function.files">
                <!--Add support for repeating based on size of thingy  -->
                <td>
                  <div class="inner-cell" ng-if="'c'===file.file_location">
                    <p class="inner-label">File Name</p>
                    <select required id="AdditionalFileName" ng-model="file.filename" ng-change="onAdditionalFilenameChange($index)" data-container="body" data-placement="right"
                      data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('FILE_NAME') }}" ng-options="inputFile as inputFile for inputFile in fileList">
                      <option value="" selected>--No Selection--</option>
                    </select>
                  </div>
                  <div class="inner-cell" ng-if="'s'===file.file_location">
                    <p class="inner-label">File Name</p>
                    <input required id="AdditionalFileName" ng-model="file.filename" type="text" ng-change="onAdditionalFilenameChange($index)" data-toggle="tooltip"
                      title="{{ getArgumentDescription('FILE_NAME') }}" data-container="body" data-html="true" data-placement="right"
                    />
                  </div>
                  <button ng-click="removeFile($index)">Remove File</button>
                </td>
                <td>
                  <div class="inner-cell">
                    <p class="inner-label">File Location</p>
                    <select required id="AdditionalFileLocation" ng-model="file.file_location" data-container="body" ng-change="onAdditionalFileLocationChange($index)" data-placement="right"
                      data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('FILE_LOCATION') }}">
                      <option value="c" selected>DSS Managed Folder</option>
                    </select>
                  </div>
                  <div class="inner-cell">
                    <p class="inner-label">File Alias</p>
                    <input required id="AdditionalFileAlias" ng-model="file.file_alias" type="text" data-container="body" data-html="true" data-placement="right" data-toggle="tooltip"
                      title="{{ getArgumentDescription('FILE_ALIAS') }}" />
                  </div>
                  <div class="inner-cell">
                    <div class="inner-cell">
                      <p class="inner-label">File Format</p>
                      <select required id="AdditionalFileFormat" ng-model="file.file_format" data-container="body" data-placement="right" data-html="true" data-toggle="tooltip"
                        title="{{ getArgumentDescription('FILE_FORMAT') }}">
                        <option value="z" selected>Text File</option>
                        <option value="b" selected>Binary File</option>
                      </select>
                    </div>
                    <div class="inner-cell">
                      <p class="inner-label">Replace File</p>
                      <input type="checkbox" ng-model="file.replace_file" data-toggle="tooltip" data-placement="right" title="{{ getArgumentDescription('REPLACE_SCRIPT') }}"></input> Replace Current File
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>

        </div>

        <!-- End Tab: Script Loading Tab -->

        <!-- Tab: STO/Apply Arguments -->

        <div id="tabs-execution" class="plugintabcontent">

          <!--<table class="table table-condensed table-hover" ng-model-options="{ debounce: 200 }">-->
          <table class="table table-condensed table-hover">
            <thead>
              <tr>
                <th>Clause&#47;Argument</th>
                <th>Value</th>
                <!--<th>Message</th>-->
              </tr>
            </thead>

            <tbody>

              <tr>
                <td>Script Language</td>
                <td>
                  <div>
                    <select required id="ScriptType" ng-model="config.function.script_type" data-toggle="tooltip" title="{{ getArgumentDescription('SCRIPT_TYPE') }}"
                      data-container="body" data-placement="right" data-html="true">
                      <option value="" selected>--No Selection--</option>
                      <option value="python" selected>Python</option>
                      <option value="r" selected>R</option>
                    </select>
                  </div>

                  <div class="inner-cell" ng-if="false">
                    <p class="inner-label">Script Command</p>
                    <textarea required id="ScriptCommand" ng-model="config.function.other_command" placeholder="Type script command here" data-toggle="tooltip"
                      title="{{ getArgumentDescription('OTHER_COMMAND') }}"></textarea>
                  </div>
                </td>
              </tr>
                <tr ng-if="isVantageCloudLake">
                  <td>Environment Name</td>
                  <td>
                    <div>
                      <label for="environment_name" data-placement="right" data-html="true" data-toggle="tooltip" title="Choose the environment from the existing environments ">
                      </label>
              		<select data-placement="right" ng-model="config.function.environment" data-html="true" data-toggle="tooltip" title="Choose the environment from the existing environments " id="environment_name" dku-bs-select="{liveSearch:true}" ng-options="v for v in names">
                      <option  value="" disabled selected></option>
                      </select>


                    </div>

                   
                  </td>
                </tr>
                <tr ng-if="isVantageCloudLake">
                  <td>Script Name</td>
                  <td>
                    <div>
                     <select data-placement="right" ng-model="config.function.uninstall_file_name" data-html="true" data-toggle="tooltip" title="Choose the file you want to remove from the existing environments" id="file_name" dku-bs-select="{liveSearch:true}" ng-options="v for v in files">
                        <option  value="" disabled selected></option>
                        </select>
                    </div>
                  </td>
                </tr>
                <tr ng-if="isVantageCloudLake">
                  <td>Delimiter</td>
                  <td>
                    <div>
                     <input type="text" data-placement="right" ng-model="config.function.delimiter" ng-init="config.function.delimiter = ','" data-html="true" data-toggle="tooltip" title=" Specifies a delimiter to use when reading columns from a row and writing result columns. Delimiter must be a valid Unicode code point. The default value is comma (,).">
                      
                    </div>
                  </td>
                </tr>
                <tr ng-if="isVantageCloudLake">
                  <td>Quotechar</td>
                  <td>
                    <div>
                     <input type="text" data-placement="right" ng-model="config.function.quotechar" ng-init="config.function.quotechar = '&quot'"  data-html="true" data-toggle="tooltip" title=" Specifies the character used to quote all input and output values for the script. The default value is double quote">
                    </div>
                  </td>
                </tr>
                
              <tr>
                <td>Arguments &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <button style="border:none;background: none;" ng-click="addScriptArgument()" title="Add Script Argument">
                    <span class="glyphicon glyphicon-plus-sign orange"></span>
                  </button>
                </td>
                <td>
                  <div ng-repeat="arg in config.function.arguments track by $index ">
                    <input ng-model="arg.value" type="text" data-container="body" data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('SCRIPT_ARGUMENTS') }}"
                      data-placement="right" />
                    <button style="border:none;background: none;" ng-if="config.function.arguments.length > 1" ng-click="removeScriptArgument($index)"
                      title="Remove Script Argument">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>
                </td>
              </tr>

              <tr>
                <td>Input Columns
                  <button style="border:none;background: none;" ng-click="addScriptInput()" title="Add Script Input">
                    <span class="glyphicon glyphicon-plus-sign orange"></span>
                  </button>
                </td>
                <td>
                  <div ng-repeat="arg in config.function.inputs track by $index ">
                    <input ng-model="arg.value" type="text" data-container="body" data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('INPUTS') }}"
                      data-placement="right" />
                    <button style="border:none;background: none;" ng-if="config.function.inputs.length > 1" ng-click="removeScriptInput($index)"
                      title="Remove Script Input">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>
                  <div class="inner-cell">
                    <label for="where_id" style="display: inline;">Conditions</label>
                    <input id="where_id" type="text" ng-model="config.function.where" data-toggle="tooltip" data-placement="right" title="{{ getArgumentDescription('WHERE') }}"/>
                  </div>
                </td>
              </tr>



              <tr>
                <td>Data Partition</td>
                <td>
                  <div class="inner-cell">
                    <select ng-model="config.function.partitionOrHash" data-toggle="tooltip" title="{{ getArgumentDescription('DATA_PARTITION_TYPE') }}"
                  data-container="body" data-placement="right" data-html="true">
                    <option value="" selected>None</option>
                    <option value="part" selected>By column values</option>
                    <option value="hash" selected>By Database AMP Hash</option>
                </div>
                </td>
              </tr>



              <tr ng-if="config.function.partitionOrHash!=''">
                <td>Column name(s) to partition by
                  <button style="border:none;background: none;" ng-click="addPartitionBy()" title="Add Partition By Columns">
                    <span class="glyphicon glyphicon-plus-sign orange"></span>
                  </button>
                </td>
                <td>
                  <div ng-repeat="arg in config.function.partitionbycolumns track by $index ">
                    <input ng-model="arg.value" type="text" data-container="body" data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('PARTITION_BY') }}"
                      data-placement="right" />
                    <button style="border:none;background: none;" ng-if="config.function.partitionbycolumns.length > 1" ng-click="removePartitionBy($index)"
                      title="Remove Partition By Columns">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>
                </td>
              </tr>

              <tr ng-if="config.function.partitionOrHash!=''">
                <td>Column name(s) to order by
                  <button style="border:none;background: none;" ng-click="addPartitionColumnBy()" title="Add Partition Order By Columns">
                    <span class="glyphicon glyphicon-plus-sign orange"></span>
                  </button>
                </td>
                <td>
                  <div ng-repeat="arg in config.function.partitionorderbycolumns track by $index ">
                    <input ng-model="arg.value" type="text" data-container="body" data-html="true" data-toggle="tooltip" title="{{ getArgumentDescription('ORDER_BY') }}"
                      data-placement="right" />
                    <select ng-model="arg.type"  type="text" data-container="body" data-html="true" data-placement="right"
                      data-toggle="tooltip" title="{{ getArgumentDescription('SEQUENCING_TYPE') }}">
                      <option value="Ascending">Ascending</option>
                      <option value="Descending">Descending</option>
                    </select>
                    <button style="border:none;background: none;" ng-if="config.function.partitionorderbycolumns.length > 1" ng-click="removePartitionColumnBy($index)"
                      title="Remove Partition Order By Columns">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                    </div>
                  </td>
              </tr>
              <tr ng-if="config.function.partitionOrHash!=''">
                    <td> Nulls Listing
                     <td>
                       
                      <select ng-model="config.function.nulls" data-html="true" data-toggle="tooltip" data-placement="right" title="[Optional] On selecting FIRST, the null values will be listed first and on selecting LAST, all the null values will be added at the end.By default,the option is N/A and nulls listing will be ignored.">
                      <option value=" ">N/A</option>
                      <option value=" NULLS FIRST">FIRST</option>
                      <option value= " NULLS LAST">LAST</option>
                      </td>
                     </td>
              </tr>

              <tr>
                <td>Output Variables &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <button style="border:none;background: none;" ng-click="addReturnClause()" title="Add RETURNS column">
                    <span class="glyphicon glyphicon-plus-sign orange"></span>
                  </button>
                </td>
                <td>
                  <div ng-repeat="clause in config.function.return_clause track by $index">
                    <input required id="ReturnsName" ng-model="clause.name" type="text" data-container="body" data-html="true" data-placement="right" data-toggle="tooltip"
                      title="{{ getArgumentDescription('RETURNS_NAME') }}" />
                    <input required id="ReturnsType" list="datatypes" ng-model="clause.type" type="text" data-container="body" data-html="true" data-placement="right"
                      data-toggle="tooltip" title="{{ getArgumentDescription('RETURNS_TYPE') }}" />
                    <datalist id="datatypes">
                      <option value="BYTEINT">
                      <option value="SMALLINT">
                      <option value="INTEGER">
                      <option value="BIGINT">
                      <option value="DECIMAL">
                      <option value="NUMERIC">
                      <option value="FLOAT">
                      <option value="CHAR(n)">
                      <option value="VARCHAR(n)">
                      <option value="DATE">
                      <option value="TIME">
                      <option value="TIMESTAMP">
                    </datalist>

                    <input type="checkbox" ng-model="clause.output" data-toggle="tooltip" data-placement="right" title="{{ getArgumentDescription('OUTPUT_COLUMN') }}" ng-change="selectOneOutput()">
                    

                    <button style="border:none;background: none;" ng-if="config.function.return_clause.length > 1" ng-click="removeReturnClause($index)"
                      title="Remove RETURNS Column">
                      <span class="glyphicon glyphicon-minus-sign orange"></span>
                    </button>
                  </div>
                  <div class="inner-cell">
                    <input type="checkbox" ng-model="config.function.outputAll" data-toggle="tooltip" title="{{ getArgumentDescription('OUTPUT_ALL') }}" data-placement="right" ng-change="selectAllOutput()">
                Select all variables
                  </div>
                </td>
                <td>
                </td>

              </tr>


            </tbody>
          </table>

        </div>


        <!-- End Tab: STO Arguments -->

        <!-- 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>Select Columns</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</td>
                <td>
                  <textarea rows="4" cols="200" ng-model="config.function.add_clauses" data-toggle="tooltip" data-placement="right" title="{{ getArgumentDescription('ADDITIONAL_CLAUSES') }}"></textarea>
                </td>
              </tr>
            </tbody>
          </table>
        </div>


        <!-- End Tab: Other SQL Arguments -->
        <!-- End tabs -->


    </div>

  </div>
  <!--End ng-controller0-->

</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">
              <!-- <a href ="/plugins/TeradataVantageScriptTO_Plugin/resource/documentation/DSSVantagePlugins-UserGuide.pdf" class="link1" target="_blank" download><span class="glyphicon glyphicon-question-sign"></span></a> -->
            <!-- <iframe src="/plugins/TeradataVantageScriptTO_Plugin/resource/documentation/" height="100%" width="98%"></iframe> -->
          </div>
      </div>
    </div>
</div>
