[define title]Issue Template [template_name][end]
[define category_css]css/ph_detail.css[end]
[include "../framework/header.ezt" "showtabs"]

<a href="/p/[projectname]/adminTemplates">&lsaquo; Back to template list</a><br><br>

[if-any read_only][include "../framework/read-only-rejection.ezt"]
[else]

<h4>Issue Template</h4>

[if-any new_template_form]
  <form action="create.do" method="POST">
[else]
  <form action="detail.do" method="POST">
[end]
<input type="hidden" name="token" value="[form_token]">
<input type="hidden" name="template" value="[template_name]">


<table cellspacing="0" cellpadding="3" class="rowmajor vt">
  <tr>
    <th>Members only:</th>
    <td>
      <input type="checkbox"[if-any allow_edit][else]disabled[end] name="members_only" [if-any initial_members_only]checked[end]>
      <label for="members_only_checkbox">Only offer this template to project members</label>
    </td>
  </tr>

  <tr>
    <th>Name:</th>
    <td>
      [if-any new_template_form]
        <input type="text" name="name" value="[template_name]">
        <span id="fieldnamefeedback" class="fielderror" style="margin-left:1em">
          [if-any errors.name][errors.name][end]
        </span>
      [else]
        [template_name]
        <input type="hidden" name="name" value="[template_name]">
      [end]
    </td>
  </tr>

  <tr>
    <th>Summary:</th>
    <td>
      [if-any allow_edit]
        <input type="text" name="summary" size="60" class=acob" value="[initial_summary]"><br>
      [else]
        [initial_summary]<br>
      [end]
      <input type="checkbox" [if-any allow_edit][else]disabled[end] name="summary_must_be_edited" [if-any initial_must_edit_summary]checked[end]>
      <label for="summary_must_be_edited_checkbox">Users must edit issue summary before submitting</label>
    </td>
  </tr>

  <tr>
    <th>Description:</th>
    <td>
      [if-any allow_edit]
         <textarea name="content" rows="12" cols="75">[initial_content]</textarea>
         [# Note: wrap="hard" has no effect on content_editor because we copy to a hidden field before submission.]
      [else]
        [initial_content]
      [end]
    </td>
  </tr>

  <tr>
    <th>Status:</th>
    <td>
      [if-any allow_edit]
        <select id="status" name="status">
          <option style="display: none" value="[initial_status]"></option>
        </select>
      [else]
        [initial_status]
      [end]
    </td>
  </tr>

  <tr>
    <th>Owner:</th>
    <td>
       [if-any allow_edit]
         <input id="owner_editor" type="text" name="owner" size="25" class="acob" value="[initial_owner]"
                autocomplete="off">
         <span id="fieldnamefeedback" class="fielderror" style="margin-left:1em">
            [if-any errors.owner][errors.owner][end]
         </span>
       [else]
         [initial_owner]<br>
       [end]
       <span>
        <input type="checkbox" [if-any allow_edit][else]disabled[end] name="owner_defaults_to_member" style="margin-left:2em" [if-any initial_owner_defaults_to_member]checked[end]>
        <label for="owner_defaults_to_member_checkbox">Default to member who is entering the issue</label>
       </span>
    </td>
  </tr>

  <tr>
    <th>Components:</th>
    <td>
      [if-any allow_edit]
        <input id="components" type="text" name="components" size="75" class="acob"
               autocomplete="off" value="[initial_components]">
       <span id="fieldnamefeedback" class="fielderror" style="margin-left:1em">
          [if-any errors.components][errors.components][end]
       </span>
      [else]
        [initial_components]
      [end]
       <br/>
       <span>
        <input type="checkbox" [if-any allow_edit][else]disabled[end] name="component_required" [if-any initial_component_required]checked[end]>
        <label for="component_required_checkbox">Require at least one component</label>
       </span>
    </td>
  </tr>

  [if-any allow_edit][if-any uneditable_fields]
  <tr id="res_fd_banner"><th></th>
    <td style="text-align:left; border-radius:25px">
      <span style="background:var(--chops-orange-50); padding:5px; margin-top:10px;padding-left:10px; padding-right:10px; border-radius:25px">
        <span style="padding-right:7px">
        Info: Disabled inputs occur when you are not allowed to edit that restricted field.
        </span>
        <i id="res_fd_message" class="material-icons inline-icon" style="font-weight:bold; font-size:14px; vertical-align: text-bottom; cursor: pointer">
        close</i>
      </span>
    </td>
  </tr>
  [end][end]

  [for fields]
    [# TODO(jrobbins): determine applicability dynamically and update fields in JS]
    [# approval subfields are shown below, not here]
    [if-any fields.field_def.is_approval_subfield][else][if-any fields.field_def.is_phase_field][else]
      <tr>
        <th>[fields.field_name]:</th>
        <td colspan="2">
          [if-any allow_edit]
            [if-any fields.is_editable]
              [include "field-value-widgets.ezt" False "tmpl" False ""]
            [else]
              <input disabled value = "
              [for fields.values]
                [fields.values.val]
              [end]
              " style="text-align:right; width:12em" class="multivalued customfield" aria-labelledby="[fields.field_id]_label">
            [end]
          [else]
            [for fields.values]
              [fields.values.val]
            [end]
          [end]
        </td>
      <tr>
    [end][end]
  [end]

  <tr>
    <th>Labels:</th>
    <td>
      [include "label-fields.ezt" "all" ""]
     </td>
   </tr>

   <tr>
     <th>Template admins:</th>
     <td>
       [if-any allow_edit]
         <input id="admin_names_editor" type="text" name="admin_names" size="75" class="acob" value="[initial_admins]"
                autocomplete="off">
       [else]
         [initial_admins]
       [end]
     </td>
   </tr>

  [if-any approvals]
     <tr>
       <th>Launch Gates:</th>
       <td colspan="7">
         <input type="checkbox" name="add_approvals" id="cb_add_approvals" [if-any allow_edit][else]disabled[end] [if-any initial_add_approvals]checked="checked"[end]>
         <label for="cb_add_approvals">Include Gates and Approval Tasks in issue</label>
         [include "launch-gates-widget.ezt"]
         <span id="fieldnamefeedback" class="fielderror" style="margin-left:1em">
              [if-any errors.phase_approvals][errors.phase_approvals][end]
         </span>
       </td>
     </tr>
  [end]

  [for fields]
    [if-any fields.field_def.is_approval_subfield]
      <tr id="subfield-row" class="subfield-row-class">
        <th>[fields.field_def.parent_approval_name] [fields.field_name]:</th>
        <td colspan="2">
          [if-any allow_edit]
            [if-any fields.is_editable]
              [include "field-value-widgets.ezt" False "tmpl" False ""]
            [else]
              <input disabled value = "
              [for fields.values]
                [fields.values.val]
              [end]
              " style="text-align:right; width:12em" class="multivalued customfield" aria-labelledby="[fields.field_id]_label">
            [end]
          [else]
            [for fields.values][fields.values.val][end]
          [end]
        </td>
      </tr>
  [end][end]

  [if-any allow_edit]
    <tr>
      <td></td>
      <td>
        <input id="submit_btn" type="submit" name="submit" value="Save template">
        <input id="delete_btn" type="submit" class="secondary" name="deletetemplate" value="Delete Template">
      </td>
    </tr>
  [end]

</table>
</form>

[include "field-value-widgets-js.ezt"]

[end][# end if not read_only]

<script type="text/javascript" nonce="[nonce]">
runOnLoad(function() {

  [if-any allow_edit]
    let addPhasesCheckbox = document.getElementById('cb_add_approvals');
    if (addPhasesCheckbox) {
      addPhasesCheckbox.addEventListener('change', toggleGatesView);
    }

    var acobElements = document.getElementsByClassName("acob");
    for (var i = 0; i < acobElements.length; ++i) {
       var el = acobElements[[]i];
       el.addEventListener("focus", function(event) {
           _acrob(null);
           _acof(event);
       });
    }

    if ($("status")) {
      _loadStatusSelect("[projectname]", "status", "[initial_status]");
      $("status").addEventListener("focus", function(event) {
        _acrob(null);
      });
    }

    if($("res_fd_message")) {
      $("res_fd_message").onclick = function(){
        $("res_fd_banner").classList.add("hidden");
      };
    };

  [else]

    let labelInputs = document.getElementsByClassName("labelinput");
    Array.prototype.forEach.call(labelInputs, labelInput => {
      labelInput.disabled = true;
    });
  [end]

  toggleGatesView();
  function toggleGatesView() {
    let addPhasesCheckbox = document.getElementById('cb_add_approvals');
    if (addPhasesCheckbox === null) return;
    let addPhases = addPhasesCheckbox.checked;
    let subfieldRows = document.getElementsByClassName('subfield-row-class');
    let phasefieldRows = document.getElementsByClassName('phasefield-row-class');
    if (addPhases) {
      $('launch-gates-table').classList.remove('hidden');
      for (let i=0; i<subfieldRows.length; i++){
        subfieldRows[[]i].classList.remove('hidden');
      }
      for (let i=0; i<phasefieldRows.length; i++){
        phasefieldRows[[]i].classList.remove('hidden');
      }
    } else{
      $('launch-gates-table').classList.add('hidden');
      for (let i=0; i<subfieldRows.length; i++){
        subfieldRows[[]i].classList.add('hidden');
      }
      for (let i=0; i<phasefieldRows.length; i++){
        phasefieldRows[[]i].classList.add('hidden');
      }
    }
  }

});
</script>

[include "../framework/footer.ezt"]