[%# 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 %]

[% js_urls = [ 'js/yui3/yui/yui-min.js',
               'extensions/GuidedBugEntry/web/js/products.js',
               'extensions/GuidedBugEntry/web/js/guided.js',
               'extensions/ProdCompSearch/web/js/prod_comp_search.js',
               'js/field.js', 'js/TUI.js', 'js/bug.js' ] %]

[% PROCESS global/header.html.tmpl
   title = "Enter A Bug"
   generate_api_token = 1
   javascript_urls = js_urls
   style_urls = [ 'extensions/GuidedBugEntry/web/style/guided.css' ]
%]

<iframe id="yui-history-iframe" src="[% basepath FILTER none %]extensions/GuidedBugEntry/web/yui-history-iframe.txt"></iframe>
<input id="yui-history-field" type="hidden">

<noscript>
You require JavaScript to use this [% terms.bug %] entry form.<br><br>
Please use the <a href="[% basepath FILTER none %]enter_bug.cgi?format=__default__">standard [% terms.bug %] entry form</a>.
</noscript>

<div id="loading" class="hidden">
Please wait...
</div>
<script [% script_nonce FILTER none %]>
YAHOO.util.Dom.removeClass('loading', 'hidden');
</script>

<div id="steps">
[% INCLUDE webdev_step %]
[% INCLUDE product_step %]
[% INCLUDE otherProducts_step %]
[% INCLUDE dupes_step %]
[% INCLUDE bugForm_step %]
</div>

<div id="advanced">
  <a id="advanced_img" href="[% basepath FILTER none %]enter_bug.cgi?format=__default__"><img
  src="[% basepath FILTER none %]extensions/GuidedBugEntry/web/images/advanced.png" width="16" height="16" border="0"></a>
  <a id="advanced_link" href="[% basepath FILTER none %]enter_bug.cgi?format=__default__">Switch to the standard [% terms.bug %] entry form</a>
</div>

<script [% script_nonce FILTER none %]>
YAHOO.util.Dom.addClass('loading', 'hidden');
guided.init({ webdev: [% webdev ? "true" : "false" %] });
guided.currentUser = '[% user.login FILTER js %]';
guided.openStates = [
[% FOREACH state = open_states %]
  '[% state FILTER js%]'
  [%- "," UNLESS loop.last %]
[% END %]
];
dupes.setLabels(
  {
    id: "[% field_descs.bug_id FILTER js %]",
    summary: "[% field_descs.short_desc FILTER js %]",
    component: "[% field_descs.component FILTER js %]",
    status: "[% field_descs.bug_status FILTER js %]"
  }
);
</script>
<script src="[% basepath FILTER none %]page.cgi?id=guided_products.js[% "&amp;format_forced=1" IF format_forced %]"></script>
[% PROCESS global/footer.html.tmpl %]

[%############################################################################%]
[%# page title                                                               #%]
[%############################################################################%]

[% BLOCK page_title %]
  <div id="page_title">
    <h2>Enter A [% terms.Bug %]</h2>
  </div>
[% END %]

[%############################################################################%]
[%# webdev step                                                             #%]
[%############################################################################%]

[% BLOCK webdev_step %]
<div id="webdev_step" class="step hidden">

[% INCLUDE page_title %]

<p>Are you reporting a [% terms.bug %] with:</p>

<ul class="product-list">
[% WRAPPER product_block
  icon="component.png"
  onclick="product.select('Core', 'Untriaged')" %]
HTML, CSS, JS, SVG, or some other web technology or combination of
web technologies?
[% END %]

[% WRAPPER product_block
  icon="devedition.png"
  onclick="product.select('Firefox', 'Developer Tools')" %]
Firefox's developer tools
[% END %]

[% WRAPPER product_block
  icon="firefox.png"
  onclick="product.select('Firefox', 'Untriaged')" %]
Firefox's user interface (for example, an issue with bookmarks,
tabbed browsing or the location bar)
[% END %]
</ul>
</div>
[% END %]

[%############################################################################%]
[%# product step                                                             #%]
[%############################################################################%]

[% BLOCK product_step %]
<div id="product_step" class="step hidden">

[% INCLUDE page_title %]

[% INCLUDE exits
   show = "all"
%]

<ul class="product-list">
[% INCLUDE 'guided/products.html.tmpl' %]
</ul>

<div id="prod_comp_search_main">
  [% PROCESS prodcompsearch/form.html.tmpl
     input_label = "Find product:"
     format      = "guided"
     script_name = "enter_bug.cgi" %]
</div>
</div>
[% END %]

[% BLOCK product_block %]
  [% IF !caption %]
    [% caption = name %]
  [% END %]
  [% IF !desc %]
    [% FOREACH cls = classifications %]
      [% FOREACH p = cls.products %]
        [% IF p.name == name %]
          [% desc = p.description %]
          [% LAST %]
        [% END %]
      [% END %]
    [% END %]
  [% END %]
    <li
      [% IF onclick %]
      onclick="[% onclick FILTER html %]"
      [% ELSE %]
      onclick="product.select('[% name FILTER js %]')"
      [% END %]>
      <span class="product-item">
      <img src="[% basepath FILTER none %]extensions/BMO/web/producticons/[% icon FILTER uri %]" class="product-icon">
      <a href="javascript:void(0)">[% caption FILTER html %]</a>
      <p>
        [% IF content %]
           [% content FILTER none %]
        [% ELSE %]
          [% desc FILTER html_light %]
        [% END %]
      </p>
      </span>
    </li>
[% END %]

[%############################################################################%]
[%# other products step                                                      #%]
[%############################################################################%]

[% BLOCK otherProducts_step %]
<div id="otherProducts_step" class="step hidden">

[% INCLUDE page_title %]

[% INCLUDE exits
   show = "all"
%]

<table id="other_products">
[% FOREACH cls = classifications %]
  [% IF cls.object %]
    <tr class="classification">
      <th align="right" valign="top">
        [% cls.object.name FILTER html %]:&nbsp;
      </th>
      <td>
        [% cls.object.description FILTER html_light %]
      </td>
    </tr>
  [% END %]
  [% FOREACH p = cls.products %]
    <tr>
      <th align="right" valign="top">
        <a href="javascript:void(0)" onclick="product.select('[% p.name FILTER js %]')">
        [% p.name FILTER html %]</a>:&nbsp;
      </th>

      <td valign="top">[% p.description FILTER html_light %]</td>
    </tr>
  [% END %]
  <tr>
    <td>&nbsp;</td>
  </tr>
[% END %]
</table>

</div>
[% END %]

[%############################################################################%]
[%# exits (support/input)                                                    #%]
[%############################################################################%]

[% BLOCK exits %]
<table class="exits">
  <tr>
    <td>
      <div class="exit_img">
        <a href="https://support.mozilla.org/">
        <img src="[% basepath FILTER none %]extensions/GuidedBugEntry/web/images/support.png" width="32" height="32"></a>
      </div>
    </td>
    <td class="exit_text">
      <a href="https://support.mozilla.org/">I need technical support</a><br>
      For technical support or help getting your site to work with Mozilla.
    </td>
  </tr>
  <tr>
    <td>
      <div class="exit_img">
        <img src="[% basepath FILTER none %]extensions/GuidedBugEntry/web/images/webbug.png" width="32" height="32">
      </div>
    </td>
    <td class="exit_text_last">
      <a href="https://webcompat.com/issues/new">Report an issue with a website that I use</a>
    </td>
  </tr>
</table>

<h3>
  None of the above; my [% terms.bug %] is in:
</h3>
[% END %]

[%############################################################################%]
[%# duplicates step                                                          #%]
[%############################################################################%]

[% BLOCK dupes_step %]
<div id="dupes_step" class="step hidden">

[% INCLUDE page_title %]

<p>
Product: <b><span id="dupes_product_name">?</span></b>:
(<a href="javascript:void(0)" onclick="guided.setStep('default')">Change</a>)
</p>

<table border="0" cellpadding="5" cellspacing="0" id="product_support" class="hidden">
  <tr>
    <td>
      <img src="[% basepath FILTER none %]extensions/GuidedBugEntry/web/images/message.png" width="24" height="24">
    </td>
    <td id="product_support_message">&nbsp;</td>
  </tr>
</table>

<table border="0" cellpadding="5" cellspacing="0" id="l10n_message">
  <tr>
    <td>
      <img src="[% basepath FILTER none %]extensions/BMO/web/producticons/localization.png" width="24" height="24">
    </td>
    <td>
      <a href="javascript:void(0)" id="l10n_link">
        <span id="l10n_product"></span> is poorly translated into my native language.
      </a>
    </td>
  </tr>
</table>

<div id="dupe_form">
  <p>
  Please summarize your issue or request in one sentence:
  </p>
  <input id="dupes_summary" value="Short summary of issue" spellcheck="true" placeholder="Short summary of issue">
  <button id="dupes_search">Find similar issues</button>
  <button id="dupes_continue_button_top" onclick="guided.setStep('bugForm')">My issue is not listed</button>
</div>

<div id="dupes_list"></div>
<div id="dupes_continue">
<button id="dupes_continue_button_bottom" onclick="guided.setStep('bugForm')">My issue is not listed</button>
</div>

</div>
[% END %]

[%############################################################################%]
[%# bug form step                                                            #%]
[%############################################################################%]

[% BLOCK bugForm_step %]
<div id="bugForm_step" class="step hidden">

[% INCLUDE page_title %]

<form method="post" action="[% basepath FILTER none %]post_bug.cgi" enctype="multipart/form-data" onsubmit="return bugForm.validate()">
<input type="hidden" name="filed_via" value="guided_form">
<input type="hidden" name="token" value="[% token FILTER html %]">
<input type="hidden" name="product" id="product" value="">
<input type="hidden" name="component" id="component" value="">
<input type="hidden" name="rep_platform" id="rep_platform" value="All">
<input type="hidden" name="op_sys" id="op_sys" value="All">
<input type="hidden" name="version" id="version" value="">
<input type="hidden" name="comment" id="comment" value="">
<input type="hidden" name="format" value="guided">
<input type="hidden" name="user_agent" id="user_agent" value="">

<ul>
<li>Please fill out this form clearly, precisely and in as much detail as you can manage.</li>
<li>Please report only a single problem at a time.</li>
<li><a href="https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines" target="_blank" rel="noopener noreferrer">These guidelines</a>
explain how to write effective [% terms.bug %] reports.</li>
</ul>

<table id="bugForm" cellspacing="0">

<tr>
  <td class="label">Summary:</td>
  <td width="100%" colspan="2">
    <input name="short_desc" id="short_desc" class="textInput" spellcheck="true">
  </td>
  <td valign="top">
    [% PROCESS help id="summary_help" %]
    <div id="summary_help" class="hidden help">
    A sentence which summarizes the problem. Please be descriptive and use lots of keywords.<br>
    <br>
    <span class="help-bad">Bad example</span>: mail crashed<br>
    <span class="help-good">Good example</span>: crash if I close the mail window while checking for new POP mail
    </div>
  </td>
</tr>

<tr>
  <td class="label">Product:</td>
  <td id="productTD">
    <span id="product_label"></span>
    (<a href="javascript:void(0)" onclick="guided.setStep('default')">Change</a>)
  </td>
  <td id="versionTD" class="hidden">
    <span class="label">Version:
    <select id="version_select" onchange="bugForm.onVersionChange(this.value)">
    </select>
  </td>
  <td valign="top">
    [% PROCESS help id="product_help" %]
    <div id="product_help" class="hidden help">
    The Product and Version you are reporting the issue with.
    </div>
</tr>

<tr id="componentTR">
  <td valign="top">
    <div class="label">
    Component:
    </div>
    (<a id="list_comp" href="[% basepath FILTER none %]describecomponents.cgi" target="_blank"
    title="Show a list of all components and descriptions (in a new window)."
    >List</a>)
  </td>
  <td valign="top" colspan="2">
    <select id="component_select" onchange="bugForm.onComponentChange(this.value)" class="mandatory">
    </select>
    <div id="component_description"></div>
  </td>
  <td valign="top">
    [% PROCESS help id="component_help" %]
    <div id="component_help" class="hidden help">
    The area where the problem occurs.<br>
    <br>
    If you are unsure which component to use, select a 'General' component.
    </div>
</tr>

<tr>
  <td class="label" colspan="3">What did you do? (steps to reproduce)</td>
  <td valign="top">
  [% PROCESS help id="steps_help" %]
  <div id="steps_help" class="hidden help">
  Please be as specific as possible about what you did
  to cause the problem.  Providing step-by-step instructions
  would be ideal.<br>
  <br>
  Include any relevant URLs and special setup steps.<br>
  <br>
  <span class="help-bad">Bad example</span>: Mozilla crashed. You suck!<br>
  <span class="help-good">Good example</span>: After a crash which happened
  when I was sorting in the Bookmark Manager, all of my top-level bookmark
  folders beginning with the letters Q to Z are no longer present.
  </div>
  </td>
</tr>
<tr>
  <td colspan="3"><textarea id="bug_steps" name="bug_steps" rows="5"></textarea></td>
  <td>&nbsp;</td>
</tr>

<tr>
  <td class="label" colspan="3">What happened? (actual results)</td>
  <td valign="top">
  [% PROCESS help id="actual_help" %]
  <div id="actual_help" class="hidden help">
  What happened after you performed the steps above?
  </div>
</tr>
<tr>
  <td colspan="3"><textarea id="actual" name="actual" rows="5"></textarea></td>
  <td>&nbsp;</td>
</tr>

<tr>
  <td class="label" colspan="3">What should have happened? (expected results)</td>
  <td valign="top">
  [% PROCESS help id="expected_help" %]
  <div id="expected_help" class="hidden help">
  What should the software have done instead?
  </div>
</tr>
<tr>
  <td colspan="3"><textarea id="expected" name="expected" rows="5"></textarea></td>
  <td>&nbsp;</td>
</tr>

<tr>
  <td class="label">Attach a file:</td>
  <td colspan="2">
    <input type="file" name="data" id="data" size="50" onchange="bugForm.onFileChange()">
    <input type="hidden" name="contenttypemethod" value="autodetect">
    <button id="reset_data" onclick="return bugForm.onFileClear()" disabled>Clear</button>
  </td>
  <td valign="top">
  [% PROCESS help id="file_help" %]
  <div id="file_help" class="hidden help">
  If a file helps explain the issue better, such as a screenshot, please
  attach one here.
  </div>
  </td>
</tr>
<tr id="data_description_tr">
  <td class="label">File Description:</td>
  <td colspan="2"><input type="text" name="description" id="data_description" class="textInput" disabled></td>
  <td>&nbsp;</td>
</tr>

<tr>
  <td class="label">[% terms.Bug %] Type:</td>
  <td>
    <label>
      <input type="radio" name="bug_type" value="defect" required>
      This is a defect report.
    </label>
  </td>
  <td>
    <label>
      <input type="radio" name="bug_type" value="enhancement" required>
      This is a request for enhancement.
    </label>
  </td>
  <td>
    [% PROCESS help id="type_help" %]
    <div id="type_help" class="hidden help">
      Please select what kind of [% terms.bug %] you’re about to submit.
    </div>
  </td>
</tr>

<tr>
  <td class="label">Security:</td>
  <td colspan="2">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <input type="checkbox" name="groups" value="core-security" id="groups">
      </td>
      <td>
        <label for="groups">Many users could be harmed by this security problem:
        it should be kept hidden from the public until it is resolved.</label>
      </td>
    </tr>
    </table>
  </td>
  <td>&nbsp;</td>
</tr>

<tr id="details">
  <td class="label">Additional Details:</td>
  <td colspan="2">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr id="firefox_for_android_row">
        <td>
          <input type="checkbox" id="firefox_for_android" name="firefox_for_android" value="1">
        </td>
        <td>
          <label for="firefox_for_android">This is a problem with Firefox on my phone or tablet.</label>
        </td>
      </tr>
    </table>
  </td>
  <td>
    &nbsp;
  </td>
</tr>

<tr id="submitTR">
  <td>&nbsp;</td>
  <td colspan="2" id="submitTD">
    <input type="submit" id="submit" value="Submit [% terms.Bug %]">
  </td>
  <td>&nbsp;</td>
</tr>

</table>

</form>

</div>
[% END %]

[%############################################################################%]
[%# help block                                                               #%]
[%############################################################################%]

[% BLOCK help %]
<img src="[% basepath FILTER none %]extensions/GuidedBugEntry/web/images/help.png" width="16" height="16" class="help_image"
 helpid="[% id FILTER html %]" onMouseOver="bugForm.showHelp(this)" onMouseOut="bugForm.hideHelp(this)"
 >
[% END %]