<!-- preview a question and its guidance.  Question is passed as an argument-->

<div class="question-div">

  <!--question format-->
  <% q_format = question.question_format %>
  <form action="">
    <div class="question-form">
      <!-- verify if the question has multiple choice -->
      <% if q_format.option_based? %>
        <% options = question.question_options.order("number") %>

        <!--checkbox display (for  backwards compatibility is also being used for
        questions in multiselectbox format display too as
        multiselect box display was confusing to some users and has been removed as an
        option for questions)-->
        <% if q_format.checkbox? || q_format.multiselectbox? %>
          <% if !options.nil? %>
            <fieldset class="choices">
              <label class="text_colour"><%= sanitize question.text %></label>
              <ol class="choices-group">
                <% options.each do |op|%>
                  <li class="choice">
                    <label>
                      <input type="checkbox">
                      <%= sanitize op.text %>
                    </label>
                  </li>
                <% end %>
              </ol>
            </fieldset>
          <% end %>
        <!--Radio buttons display-->
        <% elsif q_format.radiobuttons? %>
          <% if !options.nil?  %>
            <fieldset class="choices">
              <label class="text_colour"><%= sanitize question.text %></label>
              <ol class="choices-group">
                <% options.each do |op|%>
                  <li class="choice">
                    <label>
                      <input type="radio">
                      <%= sanitize op.text %>
                    </label>
                  </li>
                <% end %>
              </ol>
            </fieldset>
          <% end %>
        <!--dropdown display-->
        <% elsif q_format.dropdown? %>
          <% if !options.nil? %>
            <label class="text_colour">
              <%= sanitize question.text %>
            </label>
            <select>
              <% options.each do |op|%>
                <option><%= sanitize op.text %></option>
              <% end %>
            </select>
          <% end %>
        <% end %>

        <!--Suggested answer area-->
        <% if question.annotations.where(type: Annotation.types[:example_answer]).any? %>
          <% annotation = question.annotations.where(type: Annotation.types[:example_answer]).order(:created_at).first %>
          <div class="suggested-answer-div">
            <span class="suggested-answer-intro">
                <%= _('example answer')%>
            </span>
            <div class="suggested-answer-border">
              <p class="suggested-answer">
                <%= sanitize annotation.text %>
              </p>
            </div>
          </div>
        <% end %>
        <label ><%= _('Comment')%></label>
        <div class="clear"></div>
        <textarea rows="4" style="width: 97%;"><%= question.default_value %></textarea>
      <% else %>
        <label class="text_colour"><%= sanitize question.text %></label>
        <!--Suggested answer area-->
        <% annotations = question.annotations.find_by(org_id: current_user.org_id) %>
        <% if !annotations.blank? %>
          <div class="suggested-answer-div">
            <span class="suggested-answer-intro">
                <%= _('example answer')%>
            </span>
            <div class="suggested-answer-border">
              <p class="suggested-answer">
                <%= sanitize annotations.text %>
              </p>
            </div>
          </div>
        <% end %>

      <% end %>



      <!--text field display-->
      <% if q_format.title == _('Text field') %>
        <input type ="text" style="width: 97%;"/>
      <!--text area display-->
      <% elsif q_format.title == _('Text area') %>
        <textarea rows="4" style="width: 97%;" ><%= question.default_value[3..-5] unless question.default_value.nil? %></textarea>
      <% end %>
      <br/>
      <!-- button without action-->
      <%= link_to _('Save'), "#", class: "btn btn-primary", onclick: "event.preventDefault();" %>

      <span class="label label-warning answer-status"><%= _('Not answered yet') %></span>

    </div>
  </form>
</div>


<!--guidance block -->
<%= render partial: "guidances/guidance_display", locals: {question: question}%>