cdn-experiments/ccp/executionformfragment.html

<div>
  <link rel="stylesheet" href="https://nubis1.int.d4science.net:8080/ccp/css/common.css"></link>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <style>
    
  </style>
  <template id="EXECUTION_FORM_TEMPLATE">
    <div class="ccp-execution-form" name="execution_form">
      <h3></h3>
      <p class="description"></p>
      <div name="plexiglass" class="ccp-invisible">
        <span name="status"></span>
        <span class="fas fa-spinner fa-spin"></span>
      </div>
      <form name="execution_form" class="d-flex flex-column gap-3" style="gap:5px">
        <div class="card">
          <div class="card-header">
            <h5>Inputs</h5>
          </div>
          <div class="card-body ccp-inputs">
            <div class="card-body">
              <div class="form-group"></div>
            </div>
          </div>        
        </div>
        <div class="card">
          <div class="card-header">
            <h5>Outputs</h5>
          </div>
          <div class="card-body">
            <div class="form-row ccp-outputs">
              <div class="col form-group"></div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            <h5>Runtimes <span alt="refresh" title="refresh" style="cursor:pointer" name="refresh-runtimes" class="text-info">&#8634;</span></h5>
          </div>
          <div class="card-body">
            <div class="ccp-runtimes">
              <div class="form-row">
                <select class="form-control">
                </select>
              </div>
            </div>
          </div>
        </div>
 	<button id="execute_method_button" class="btn btn-info">Execute</button>
      </form>
    </div>    
  </template>
  <template id="EXECUTION_FORM_EMPTY_TEMPLATE">
    <div name="execution_form">
      <i style="padding:3rem">Select a method</i>
    </div>
  </template>
  <div name="execution_form"></div>
</div>