<!-- 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-->
        <% if q_format.checkbox? %>
          <%if !options.nil? %>
            <fieldset class="choices">
              <label class="text_colour"><%= raw question.text %></label>
              <ol class="choices-group">
                <% options.each do |op|%>
                  <li class="choice"><label ><input type="checkbox" ><%= raw op.text %></label></li>
                <% end %>
              </ol>
            </fieldset>
          <% end %>
        <!--multi select box display-->
        <% elsif q_format.multiselectbox? %>
          <% if !options.nil? %>
            <label class="text_colour"><%= raw question.text %></label>
            <select multiple="multiple">
              <% options.each do |op|%>
                <option><%= raw op.text %></option>
              <% end %>
            </select>
          <% end %>
        <!--Radio buttons display-->
        <% elsif q_format.radiobuttons? %>
          <% if !options.nil?  %>
            <fieldset class="choices">
              <label class="text_colour"><%= raw question.text %></label>
              <ol class="choices-group">
                <% options.each do |op|%>
                  <li class="choice"><label ><input type="radio"><%= raw op.text %></label></li>
                <% end %>
              </ol>
            </fieldset>
          <% end %>
        <!--dropdown display-->
        <% elsif q_format.dropdown? %>
          <% if !options.nil? %>
            <label class="text_colour" ><%= raw question.text %></label>
            <select>
              <% options.each do |op|%>
                <option><%= raw 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">
                <%= raw 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"><%= raw 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">
                <%= raw 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}%>