<template id="run-remote-batch-script" >
<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
<style data-src="/templates/livelystyle.css"></style>
  <style>
    :host {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;

      display: flex;
      flex-direction: column;
    }

    #endpoint-row {
      display: flex;
      flex-direction: row;
    }
    #endpoint-row input {
      flex: 1;
    }
    #endpoint-row label {
      padding-right: 5px;
    }
    
    #scriptList {
      flex: 1;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    #scriptList ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      width: 100%;
    }
    #scriptList li {
      list-style-type: none;
      width: 100%;
      padding: 3px;
      border-radius: 3px;
    }
    #scriptList li:hover {
      background-color: lightgray;
      cursor: pointer;
    }
    #result-field {
      border: gray 2px solid;
      flex: 1;
      overflow-y: scroll;
    }
  </style>
  <div id="endpoint-row">
    <label for="endpoint">Endpoint</label>
    <input type="text" id="endpoint" placeholder="endpoint" />
    <button id="searchEndpoints">Search Scripts</button>
  </div>
  <div id="scriptList"></div>
  <div id="result-field">
    Result Field
  </div>
</template>


