{{{#!html
<form id="wp_action">
  <table style="margin: 0px auto;">
    <tbody>
      <tr>
	<td>
	  <fieldset style="height: 15em;">
	    <legend>
	      Action name
	    </legend>
	    <table>
	      <tbody style="vertical-align: inherit;">
		<tr>
		  <td>
		    Scope
		  </td>
		  <td>
		    <select id="realm" onchange="val()" required>
		      <option value=""              ></option                       >
		      <optgroup label="Institute">
			<option value="CMCC"          >CMCC</option                   >
			<option value="CNRS"          >CNRS-INSU</option              >
			<option value="Mercator_Ocean">Mercator Océan</option         >
			<option value="Met_Office"    >Met Office</option             >
			<option value="NOC"           >NERC-NOC</option               >
		      </optgroup>
		      <optgroup label="Streams"  >
			<option value="AGRIF"         >AGRIF</option                  >
			<option value="ENHANCE"       >Enhancement</option            >
			<option value="HPC"           >HPC</option                    >
			<option value="PUBLI"         >Publication</option            >
			<option value="ROBUST"        >Robustness - Test Cases</option>
			<option value="SEAICE"        >Sea-Ice</option                >
			<option value="VALID"         >Validation</option             >
		      </optgroup>
		    </select>
		    <br>
		    <span class="hint">Institute for specific actions, Stream for shared actions</span>
		  </td>
		</tr>
		<tr>
		  <td>
		    Number
		  </td>
		  <td>
		    <select id="increment" onchange="val()"></select>
		    <br>
		    <span class="hint">Check the tables above to define open number</span>
		  </td>
		</tr>
		<tr>
		  <td>
		    Suffix
		  </td>
		  <td>
		    <input type="text" id="suffix" placeholder="Name(s)-Keyword(s)" required>
		    <br>
		    <span class="hint">Identify PI(s) and field(s), <u>no space recommended</u></span>
		  </td>
		</tr>
		<tr>
		  <td>
		    <em>Preview</em>
		  </td>
		  <td>
		    <em id="name_preview"></em>
		  </td>
		</tr>
	      </tbody>
	    </table>
	  </fieldset>
	<td>
	  <fieldset style="height: 15em; display: grid;">
	    <legend>
	      Submit / Reset
	    </legend>
	    <input type="hidden" name="summary"     value=""               id="summary">
	    <input type="hidden" name="type"        value="Task"                       >
	    <input type="hidden" name="milestone"   value="`$YEAR` 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 style="text-align: center;">
		    <input  type="submit" id="form_wiki"   value="Create action wiki"   formtarget="_blank" formaction="/nemo/wiki/`$YEAR` WP/__REPLACE_DYNAMICALLY__">
		  </td>
		</tr>
		<tr>
		  <td style="text-align: center;">
		    <input  type="submit" id="form_ticket" value="Open action ticket" formtarget="_blank" formaction="/nemo/newticket"                              >
		  </td>
		</tr>
		<tr>
		  <td style="text-align: center;">
		    <button type="reset" onclick="resetForm();">Clear form</button>
		  </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>
}}}