<!--
**Project: DMPRoadmap
**Description: This block displays adding a new question, its guidance, and options when multiple choice is selected
in the admin interface.
**Arguments transferred: an instance of 'section'
**Copyright: Digital Curation Centre and California Digital Library
-->
<% @new_question = Question.new %>
<% @new_question.number = section.questions.count + 1 %>
<%= form_for @new_question, url:  admin_create_question_path(r: current_tab) , html: {id: "new_question_#{section.id}", class: 'question_form'} do |f| %>
  <%= f.hidden_field :section_id, value: section.id %>
  <%= hidden_field_tag :section_id, section.id, class: "section_id_new" %>

  <!--Question number -->
  <div class="form-group col-md-4">
    <%= f.label(:number, _('Question Number'), class: "control-label") %>
    <%= f.number_field(:number, in: 1..50, class: "form-control", "aria-required": true, 'aria-required': true) %>
  </div>

  <!--Question text -->
  <div class="form-group col-md-10">
    <%= f.label(:text, _('Question text'), class: "control-label") %>
    <%= f.text_area(:text, class: "question") %>
  </div>

  <!-- Question format -->
  <div class="form-group col-md-4">
    <%= f.label(:question_format_id, _('Answer format'), class: "control-label") %>
    <%= f.select :question_format_id,
      options_from_collection_for_select(QuestionFormat.all.order("title"),
      :id,
      :title,
      QuestionFormat.id_for(QuestionFormat.formattypes[:textarea])),
      {},
      class: "form-control",
      'data-toggle': 'tooltip',
      'data-html': true,
      title: _("You can choose from:<ul><li>- text area (large box for paragraphs);</li> <li>- text field (for a short answer);</li> <li>- checkboxes where options are presented in a list and multiple values can be selected;</li> <li>- radio buttons where options are presented in a list but only one can be selected;</li> <li>- dropdown like this box - only one option can be selected;</li> <li>- multiple select box allows users to select several options from a scrollable list, using the CTRL key;</li></ul>")
    %>
  </div>

  <!--display form to enter option for option_based questions -->
  <div class="form-group col-md-10" data-attribute="question_options" style="display: none;">
    <div class="col-md-offset-2">
      <%= render "/question_options/option_fields", f: f, q: @new_question %>
      <!--display for selecting comment box when multiple choice is being used-->
    </div>
  </div>
  <div class="form-group col-md-10" data-attribute="option_comment" style="display:none;">
    <label>
      <%= f.check_box :option_comment_display, as: :check_boxes %><%= _('Display additional comment area.') %>
    </label>
  </div>
  <!--Question default_value -->
  <div class="form-group col-md-10" data-attribute="default_value">
    <%= f.label(:default_value, _('Default answer'), class: "control-label") %>
    <div data-toggle="tooltip" title="<%= _('Anything you enter here will display in the answer box. If you want an answer in a certain format (e.g. tables), you can enter that style here.') %>">
      <span data-attribute="textfield" style="display: none;">
        <%= text_field_tag("question-default-value-textfield", @new_question.default_value, class: 'form-control') %>
      </span>
      <span data-attribute="textarea">
        <%= text_area_tag("question-default-value-textarea", @new_question.default_value, class: 'question') %>
      </span>
    </div>
  </div>
  <!-- Suggested answer or Example for Question -->
  <div class="form-group col-md-10">
    <%= f.label(:example_answer, _('Example Answer'), class: "control-label") %>
    <div data-toggle="tooltip" title="<%= ('You can add an example answer to help users respond. These will be presented above the answer box and can be copied/ pasted.') %>">
      <%= text_area_tag(:example_answer, "", id: "question_example_answer", class: 'question') %>
    </div>
  </div>
  <!-- Guidance for Question -->
  <div class="form-group col-md-10">
    <%= f.label(:guidance, _('Guidance'), class: "control-label") %>
    <div data-toggle="tooltip" title="<%= _("Enter specific guidance to accompany this question. If you have guidance by themes too, this will be pulled in based on your selections below so it's best not to duplicate too much text.") %>">
      <%= text_area_tag(:guidance, "", id: "question_guidance", class: 'question') %>
    </div>
  </div>
  <!-- Themes -->
  <div class="form-group col-md-10">
    <%= render partial: 'org_admin/shared/theme_selector', 
               locals: { f: f, all_themes: Theme.all.order("title"),
                         popover_message: _('Select one or more themes that are relevant to this question. This will allow similarly themed organisation-level guidance to appear alongside your question.') } %>
  </div>
  <div class="form-group">
    <div class="col-md-4 col-md-offset-10 pull-right">
      <%= f.submit _('Save'), class: "btn btn-default", role:'button' %>
      <%= link_to _('Cancel'), '#', class: "btn btn-default new_question_cancel", role: 'button' %>
    </div>
  </div>
<% end %>