{{{#!html
<table style="margin: 0px auto;">
  <tbody>
    <tr>
      <td>
        <fieldset style="height: 16em; display: grid;"><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          </option>
                      <option value="MOI" >Mercator Océan</option>
                      <option value="UKMO">Met Office    </option>
                      <option value="NOC" >NOC           </option>
                    </optgroup>
                    <optgroup label="Streams (shared action)"     >
                      <option value="AGRIF"  >AGRIF                     </option>
                      <option value="ASINTER">Air-Sea Interactions      </option>
                      <option value="HPC"    >HPC                       </option>
                      <option value="KERNEL" >Kernel                    </option>
                      <option value="PUBLI"  >Publications              </option>
                      <option value="SI3"    >SI3                       </option>
                      <option value="TOP"    >TOP                       </option>
                      <option value="VALID"  >Validation                </option>
                      <option value="ENHANCE">Enhancements (if no other)</option>
                    </optgroup>
                  </select>
                </td>
              </tr>
              <tr>
                <th>Number</th>
                <td>
                  <select id="nb" 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>
                </td>
              </tr>
            </tbody>
          </table>
        </fieldset>
      </td>
      <td>
        <fieldset style="height: 16em; display: grid;align-content: center;"><legend>2 - Create resources</legend>
          <p>
            <form id="form_wiki" target="_blank">
              <input type="hidden" name="action"    value="edit"                                                                      >
              <input type="hidden" name="template"  value="Workplan/Action"                                                           >
              <input type="submit" id="submit_wiki" value="Create wiki page" formaction="/nemo/wiki/`$YEAR`WP/__REPLACE_DYNAMICALLY__"><br>
              <span class="hint">Guidelines & Record</span>
            </form>
          </p>
          <p>
            <form id="form_ticket" target="_blank">
              <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="owner"       value=""                                             >
              <input type="submit" id="submit_ticket" value="Open task ticket" formaction="/nemo/newticket"><br>
              <span class="hint">Monitoring & Discussion</span>
            </form>
          </p>
        </fieldset>
      </td>
    </tr>
  </tbody>
</table>

<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("nb"); 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 nb = $("#nb").val(); var suffix = $("#suffix").val();
    action_name = realm + '-' + nb + '_' + suffix;
    $("#name_preview").text(action_name); $("#summary").val(action_name);
  }

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

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

</script>
}}}