[%# This Source Code Form is subject to the terms of the Mozilla Public
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
  #
  # This Source Code Form is "Incompatible With Secondary Licenses", as
  # defined by the Mozilla Public License, v. 2.0.
  #%]

[% PROCESS global/variables.none.tmpl %]

[% inline_style = BLOCK %]
#feature_form {
  padding: 10px;
}
#feature_form .required:after {
  content: " *";
  color: red;
}
#feature_form .field_label {
  font-weight: bold;
}
#feature_form .field_desc {
  padding-bottom: 3px;
}
#feature_form .field_desc,
#feature_form .head_desc {
  width: 600px;
  word-wrap: normal;
}
#feature_form .head_desc {
  padding-top: 5px;
  padding-bottom: 12px;
}
#feature_form .form_section {
  margin-bottom: 10px;
}
#feature_form textarea {
  font-family: inherit;
  font-size: inherit;
}
#feature_form #comp_description {
  test-align: left;
  color: green;
  padding-left: 1em;
}
#feature_form .hidden {
  display: none;
}
[% END %]

[% inline_javascript = BLOCK %]
var compdesc = [];
compdesc[""] = 'Please select a component from the list above.';
[% FOREACH comp = product.components %]
  compdesc['[% comp.name FILTER js %]'] = '[% comp.description FILTER js %]';
[% END %]
function showCompDesc() {
  var comp_select = document.getElementById('component');
  document.getElementById('comp_description').innerHTML = compdesc[comp_select.value];
}

function validateAndSubmit() {
  var alert_text = '';
  if (!isFilledOut('component')) alert_text += 'Please select a component.\n';
  if (!isFilledOut('short_desc')) alert_text += 'Please provide a summary of the feature request.\n';
  if ($('#discussion').val() === 'yes') {
    if (!isFilledOut('bug_file_loc')) alert_text += 'Please provide the "Mailing list thread" URL.\n';
  }
  if (alert_text != '') {
    alert(alert_text);
    return false;
  }
  return true;
}

$(function() {
  $('#discussion')
    .change(function() {
      if ($(this).val() === 'yes') {
        $('.thread').removeClass('hidden');
        $('.thread input').prop('disabled', false);
      }
      else {
        $('.thread').addClass('hidden');
        $('.thread input').prop('disabled', true);
      }
    })
    .change();
  showCompDesc();
});
[% END %]

[% PROCESS global/header.html.tmpl
   title = "Firefox OS Feature Request Form"
   generate_api_token = 1
   style = inline_style
   javascript = inline_javascript
   javascript_urls = [ 'extensions/BMO/web/js/form_validate.js', 'js/field.js' ]
%]

[% USE Bugzilla %]
[% cgi = Bugzilla.cgi %]

<form id="feature_form" method="post" action="post_bug.cgi" enctype="multipart/form-data"
      onSubmit="return validateAndSubmit();">
  <input type="hidden" name="format" value="fxos-feature">
  <input type="hidden" name="product" value="Firefox OS">
  <input type="hidden" name="keywords" id="keywords" value="foxfood">
  <input type="hidden" name="rep_platform" value="All">
  <input type="hidden" name="op_sys" value="Other">
  <input type="hidden" name="version" value="unspecified">
  <input type="hidden" name="bug_status" value="UNCONFIRMED">
  <input type="hidden" name="bug_severity" value="normal">
  <input type="hidden" name="token" value="[% token FILTER html %]">

<img title="Firefox OS Feature Form" src="extensions/BMO/web/producticons/firefox_os.png" width="64" height="64">

<div class="form_section">
  <label for="component" class="field_label required">Product Component</label>
  <div class="field_desc">
    Which product component is your feature request applicable to?
    If you are not sure, choose "Gaia::Feedback".
  </div>
  <select name="component" id="component" onchange="showCompDesc(this);">
    <option value="">Select One</option>
    [% FOREACH c IN product.components %]
      [% NEXT UNLESS c.is_active %]
      [% NEXT UNLESS c.name == "Gaia::Feedback" %]
      <option value="[% c.name FILTER html %]" id="v[% c.id FILTER html %]_component"
              [% " selected" IF c.name == default.component_ %]>
        [% c.name FILTER html %]
      </option>
    [% END %]
    [% FOREACH c IN product.components %]
      [% NEXT UNLESS c.is_active %]
      [% NEXT IF c.name == "Gaia::Feedback" %]
      <option value="[% c.name FILTER html %]" id="v[% c.id FILTER html %]_component"
              [% " selected" IF c.name == default.component_ %]>
        [% c.name FILTER html %]
      </option>
    [% END %]
  </select>
  <div id="comp_description"></div>
</div>

<div class="form_section">
  <label for="feature_type" class="field_label required">This is a feature request</label>
  <div class="field_desc">
    Is this a defect with existing functionality or a new feature request?
  </div>
  <select id="feature_type" name="feature_type">
    <option value="new" [%= "selected" IF feature_type == 'new' %]>
      New Feature Request</option>
    <option value="existing" [%= "selected" IF feature_type == 'existing' %]>
      Existing Feature Defect</option>
  </select>
</div>

<div class="form_section">
  <label for="short_desc" class="field_label required">Feature Request Summary</label>
  <div class="field_desc">
    Please enter a title for your feature request that is brief and self explanatory.
    (Example: "Memory dialing using keypad numbers")
  </div>
  <input type="text" name="short_desc" id="short_desc"
         size="80" value="[% short_desc FILTER html %]">
</div>

<div class="form_section">
  <label for="description" class="field_label">Description of feature or problem to be solved</label>
  <div class="field_desc">
    Please describe the feature that you are requesting or the problem that you would like solved in detail
    (Example, "Today, there is no way for the user to quickly dial user-defined numbers from the dial pad.
    Instead the user must search for an find the contact in their contact list.").
    If the described feature only applies to certain device types (eg. tablet vs. smartphone), please make note of it.
  </div>
  <textarea id="description" name="description" cols="80" rows="5">
    [% description FILTER html %]</textarea>
</div>

<div class="form_section">
  <label for="discussion" class="field_label">Was this discussed in a mailing list?</label>
  <div class="field_desc">
  </div>
  <select id="discussion" name="discussion">
    <option value="no" [%= "selected" IF discussion == 'no' %]>No</option>
    <option value="yes" [%= "selected" IF discussion == 'yes' %]>Yes</option>
  </select>
</div>

<div class="form_section thread hidden">
  <label for="bug_file_loc" class="field_label required">Mailing list thread</label>
  <div class="field_desc">
    The mailing list post where this was discussed.<br>
    e.g. https://groups.google.com/a/mozilla.com/forum/#!topic/foxfood-feedback/eCg6KaVD4FE
  </div>
  <input type="text" name="bug_file_loc" id="bug_file_loc" size="80"
         value="[% bug_file_loc FILTER html %]" disabled>
</div>

<div class="form_section thread hidden">
  <label for="cc" class="field_label">Stakeholder email addresses</label>
  <div class="field_desc">
    Anyone you think would like to follow this request. You may include people
    who discussed this in the mailing list thread, if there was one.
  </div>
  [% INCLUDE global/userselect.html.tmpl
     id       => "cc"
     name     => "cc"
     value    => cc
     size     => 80
     classes  => ["bz_userfield"]
     multiple => 5
  %]
</div>

<div class="head_desc">
  Once your form has been submitted, a tracking [% terms.bug %] will be
  created. We will then reach out for additional info and next steps.  If you
  discussed this on a mailing list, please link the people there to this
  tracking [% terms.bug %].  Thanks!
</div>

<input type="submit" id="commit" value="Submit">

<p>
  [ <span class="required_star">*</span> <span class="required_explanation">Required Field</span> ]
</p>

</form>

[% PROCESS global/footer.html.tmpl %]