[%# 1.0@bugzilla.org %]
[%# The contents of this file are subject to the Mozilla Public
  # License Version 1.1 (the "License"); you may not use this file
  # except in compliance with the License. You may obtain a copy of
  # the License at http://www.mozilla.org/MPL/

  #
  # Software distributed under the License is distributed on an "AS
  # IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
  # implied. See the License for the specific language governing
  # rights and limitations under the License.
  #
  # The Original Code is the Bugzilla Bug Tracking System.
  #
  # The Initial Developer of the Original Code is Mozilla Corporation.
  # Portions created by Mozilla are Copyright (C) 2008 Mozilla
  # Corporation. All Rights Reserved.
  #
  # Contributor(s): Sebastin Santy <sebastinssanty@gmail.com>
  #%]

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

[% inline_style = BLOCK %]
#heading {
  width:       98%;
  font-size:   2em;
  font-weight: bold;
  margin:      12px;
}
.required:before {
  content: "* ";
  color: red;
}
.required_star {
  color: red;
}
p {
  max-width: 40%;
}
.row {
  padding-bottom: 10px;
}
[% END %]

[% inline_javascript = BLOCK %]
$(document).ready(function() {
  $('.date_field').datetimepicker({
    format: 'Y-m-d',
    datepicker: true,
    timepicker: false,
    scrollInput: false,
    lazyInit: false,
    closeOnDateSelect: true
  });
  $('#langothers').on('focus', function(){
    document.getElementById("langothersradio").checked = true;
  });
  $('#assetothers').on('focus', function(){
    document.getElementById("assetothersradio").checked = true;
  });
  $('.date_field-img')
    .click(function(event) {
      var id = $(event.target).attr('id').replace(/-img$/, '');
      $('#' + id).datetimepicker('show');
  });
  $('#ipcForm').submit(function() {
    $('#short_desc').val($('#short_desc').val() + ': ' + $('#team_name').val());
  });
  $('#new_email_request').on('change', function() {
    if ($('#new_email_request').val() == 'Yes') {
      $('#email_cadence_row').show();
      $('input[name="email_cadence"]').each(function() {
        $(this).attr('required', true);
      });
    }
    else {
      $('#email_cadence_row').hide();
      $('input[name="email_cadence"]').each(function() {
        $(this).removeProp('required');
      });
    }
  });
});
[% END %]

[% PROCESS global/header.html.tmpl
   title              = "IPC Request"
   generate_api_token = 1
   style_urls         = [ "skins/standard/attachment.css",
                          "js/jquery/plugins/datetimepicker/datetimepicker.css" ]
   style              = inline_style
   javascript         = inline_javascript
   javascript_urls    = [ "js/field.js", "js/util.js" ]
   jquery             = [ "datetimepicker" ]
%]

<div id="heading">IPC Requests</div>
<div>
  <p>You’ve decided to use the snippet channel to drive attention to one of your projects, awesome! The snippet channel drives hundreds of millions of impressions a month. It’s great tool to support your marketing efforts. Complete this form and we will follow up with you soon (maybe today, but definitely within 3 days).
  </p>
  <p>
    Tell us more:
  </p>

  <form method="post" action="post_bug.cgi" id="ipcForm">
    <input type="hidden" id="short_desc" name="short_desc" value="New IPC Request">
    <input type="hidden" name="product" value="Marketing">
    <input type="hidden" name="component" value="IPC">
    <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="priority" value="--">
    <input type="hidden" name="bug_severity" value="normal">
    <input type="hidden" name="format" value="ipc">
    <input type="hidden" name="token" value="[% token FILTER html %]">
    [% IF user.in_group('canconfirm') %]
      <input type="hidden" name="bug_status" value="NEW">
    [% END %]
  
    <div class="row">
      <div class="row_desc">
        <label class="required" for="team_name">
          <strong>What team are you a part of?</strong>
        </label>
      </div>
      <input required type="text" name="team_name" id="team_name" size="80">
    </div>

    <div class="row">
      <div class="row_desc">
        <label for="cf_user_story">
          <strong>What is the user story associated with your snippet?</strong>
        </label>
      </div>
      <textarea name="cf_user_story" id="cf_user_story" cols="80" rows="10"></textarea>
    </div>

    <div class="row">
      <div class="row_desc">
        <strong>Will your snippet need to appear in a language other than English? If so, please specify.</strong>
      </div>
      <input type="checkbox" name="language" id="spanish" value="Spanish">
      <label for="spanish">Spanish</label><br>
      <input type="checkbox" name="language" id="italian" value="Italian">
      <label for="italian">Italian</label><br>
      <input type="checkbox" name="language" id="german" value="German">
      <label for="german">German</label><br>
      <input type="checkbox" name="language" id="french" value="French">
      <label for="french">French</label><br>
      <input type="checkbox" name="language" id="russian" value="Russian">
      <label for="russian">Russian</label><br>
      <input type="checkbox" name="language" id="portuguese" value="Portuguese">
      <label for="portuguese">Portuguese</label><br>
      <input type="checkbox" name="language" id="langothersradio">
      <label for="langothers">Others: </label>
      <input type="text" name="language" id="langothers" size="30">
    </div>

    <div class="row">
      <div class="row_desc">
        <label for="target_country">
          <strong>Does your snippet need to be targeted to a particular country? If so, please specify.</strong>
        </label>
      </div>
      <input type="text" name="target_country" id="target_country" size="80">
    </div>

    <p>
    If you would like your snippet to include a link, please tag it by using the URL builder <a href="https://bit.ly/1JOgDr1">(https://bit.ly/1JOgDr1)</a> and following the steps below:
    </p>
    <img src="extensions/BMO/web/images/ipc_form_buildscreen.png" style = "width:50%"><br><br>
    <div class="row">
      <div class="row_desc">
        <label for="tagged_link">
          <strong>Insert your tagged link here.</strong>
        </label>
      </div>
      <input type="text" name="tagged_link" id="tagged_link" size="80">
    </div>

    <p>
    Please reference the Mozilla In-Product Messaging Calendar for available dates. <a href="https://bit.ly/2aZ3w9c"> https://bit.ly/2aZ3w9c</a>
    </p>

    <div class="row">
      <div class="row_desc">
        <label for="start_run">
          <strong>When would you like your snippet to start its run?</strong>
        </label>
      </div>
      <input class="date_field" name="start_run" id="start_run">
      <img class="date_field-img" id="start_run-img" src="extensions/BugModal/web/calendar.png" width="16" height="16">
    </div>

    <div class="row">
      <div class="row_desc">
        <label for="complete_run">
          <strong>When would you like your snippet to complete its run?</strong>
        </label>
      </div>
      <input class="date_field" name="complete_run" id="complete_run">
      <img class="date_field-img" id="complete_run-img" src="extensions/BugModal/web/calendar.png" width="16" height="16">
    </div>

    <div class="row">
      <div class="row_desc">
        <strong>Will you be able to provide the following assets for your snippet? Check all that apply.</strong><br>
        Feel free to look at our existing icon library:
        <a href="https://bit.ly/2efXaFo">https://bit.ly/2efXaFo</a>
      </div>
      <input type="checkbox" name="snippet_assets" id="copy" value="Copy">
      <label for="copy">Copy</label><br>
      <input type="checkbox" name="snippet_assets" id="icon" value="Icon">
      <label for="icon">Icon</label><br>
      <input type="checkbox" name="snippet_assets" id="special_format" value="Special Format">
      <label for="special_format">Special Format</label><br>
      <input type="checkbox" name="snippet_assets" id="assetothersradio">
      <label for="assetothers">Others: </label>
      <input type="text" name="snippet_assets" id="assetothers" size="30">
    </div>

    <input type="hidden" required name="name" id="name" value="[% user.name FILTER html %]" size="80">

    <input type="hidden" required name="email" id="email" value="[% user.email FILTER html %]" size="80">

    <div class="row">
      <div class="row_desc">
        <label for="else">
          <strong>Anything else you would like to add?</strong><br>
        </label>
      </div>
      <textarea name="else" id="else" cols="80" rows="10"></textarea>
    </div>
      <h3><strong>Bonus Question</strong></h3>
      <div class="row">
      <div class="row_desc">
        <strong>Who do you think is coolest?</strong>
      </div>
      <input type="radio" name="bonus" id="han_solo" value="Hans Solo">
      <label for="han_solo">Han Solo</label><br>
      <input type="radio" name="bonus" id="hermoine_granger" value="Hermoine Granger">
      <label for="hermoine_granger">Hermione Granger</label><br>
      <input type="radio" name="bonus" id="picard" value="Captain Jean-Luc Picard">
      <label for="picard">Captain Jean-Luc Picard</label><br>
      <input type="radio" name="bonus" id="everdeen" value="Katniss Everdeen">
      <label for="everdeen">Katniss Everdeen</label><br>
    </div>

    <p>Thanks for reaching out. Click submit and we will be back with you shortly.</p>

    <input type="submit" id="commit" value="Submit Request">
    <p>
      [ <span class="required_star">*</span> <span class="required_explanation">Required Field</span> ]
    </p>
  </form>
</div>

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