{{{#!html
<form id="wp_action">
 <table style="margin: 0px auto;">
  <tbody>
   <tr>
    <td>
     <fieldset><legend>1 - Define action</legend>
      <table>
       <tbody style="vertical-align: inherit;">
        <tr>
         <th>Scope</th>
         <td>
          <select id="realm" onchange="val()" required>
           <option value=""></option>
           <optgroup label="Institutes (specific action)">
            <option value="CMCC"    >CMCC          </option>
            <option value="CNRS"    >CNRS-INSU     </option>
            <option value="Mercator">Mercator Océan</option>
            <option value="UKMO"    >Met Office    </option>
            <option value="NOC"     >NERC-NOC      </option>
           </optgroup>
           <optgroup label="Streams (shared action)"     >
            <option value="AGRIF"  >AGRIF                    </option>
            <option value="ASINTER">Air-Sea Interaction      </option>
            <option value="HPC"    >HPC                      </option>
            <option value="KERNEL" >Kernel                   </option>
            <option value="PUBLI"  >Publication              </option>
            <option value="SI3"    >SI3                      </option>
            <option value="TOP"    >TOP                      </option>
            <option value="ENHANCE">Enhancement (last resort)</option>
           </optgroup>
          </select>
         </td>
        </tr>
        <tr>
         <th>Number</th>
         <td>
          <select id="increment" onchange="val()"></select>
          <span class="hint">Incremental, check free nb above</span>
         </td>
        </tr>
        <tr>
         <th>Suffix</th>
         <td>
          <input type="text" id="suffix" placeholder="Name(s)-Keyword(s)" col="20" required><br>
          <span class="hint">Identify PI(s) and field(s), <u>no space</u></span>
         </td>
        </tr>
        <tr>
         <th><em>Preview</em></th>
         <td>
          <em id="name_preview"></em><br>
          <button type="reset" onclick="resetForm();">Clear!</button>
         </td>
        </tr>
       </tbody>
      </table>
     </fieldset>
    </td>
    <td>
     <fieldset><legend>2 - Create resources</legend>
      <input type="hidden" name="summary"   value=""               id="summary">
      <input type="hidden" name="type"      value="Task"                       >
      <input type="hidden" name="milestone" value="2019 WP"                    >
      <input type="hidden" name="version"   value="trunk"                      >
      <input type="hidden" name="action"    value="edit"                       >
      <input type="hidden" name="template"  value="WorkPlanAction"             >
      <table>
       <tbody>
        <tr>
         <td>
          <input  type="submit" id="form_wiki"   value="Wiki page"   formtarget="_blank" formaction="/nemo/wiki/2019WP/__REPLACE_DYNAMICALLY__"><br>
          <span class="hint">Development preview and review</span>
         </td>
        </tr>
        <tr>
         <td>
          <input  type="submit" id="form_ticket" value="Task ticket" formtarget="_blank" formaction="/nemo/newticket"                          ><br>
          <span class="hint">Monitoring & Discussion</span>
         </td>
        </tr>
       </tbody>
      </table>
     </fieldset>
    </td>
   </tr>
  </tbody>
 </table>
</form>

<script type="text/javascript">

  // Global variable for action name
  var action_name;

  // Leading zeros for number
  function padWithZeroes(n, width) { while ( n.length < width ) n = '0' + n; return n; }

  // Auto-generated numbers sequence for select input
  for(var i=1; i<=20; i++){
    var select = document.getElementById("increment"); var option = document.createElement("option");
    select.options.add(option);
    option.text = i; option.value = padWithZeroes(i.toString(), 2);
  }

  // Build the real action name by concatenating the form inputs
  function val() {
    var realm = $("#realm").val(); var inc = $("#increment").val(); var suffix = $("#suffix").val();
    action_name = realm + '-' + inc + '_' + suffix;
    $("#name_preview").text(action_name); $("#summary").val(action_name);
  }

  // Update name preview as typing
  $("#suffix").keyup (function() { val(); });

  function resetForm(){ setTimeout(function(){ val(); }, 50); }

  // Set wiki page name on the fly
  $("#wp_action").submit(function() {
    var form_action = $("#form_wiki").attr("formaction");
    form_action = form_action.replace("__REPLACE_DYNAMICALLY__", action_name);
    $("#form_wiki").attr("formaction", form_action);
  });

</script>
}}}