<!--
**Project: DMPRoadmap
**Description: This block shows a question, its guidance, and options when multiple choice is selected.
**Arguments transferred: 'question'
**Copyright: Digital Curation Centre and California Digital Library
-->
<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-8">
        <% q_format = question.question_format %>
        <dl class="dl-horizontal">
          <dt><%= _('Question number')%></dt>
          <dd><%= question.number %></dd>
          <dt><%= _('Question text')%></dt>
          <dd>
            <div class="display-readonly-textarea-content">
                <%= sanitize question.text %>
            </div>
          </dd>
          <!-- question.option_based? -->
          <% if question.option_based? %>
            <dt><%= _('Question options') %></dt>
            <dd><%= question.question_options.collect(&:text).join(', ') %></dd>
          <% end %>
          <!-- Default value -->
          <% if q_format.textfield? || q_format.textarea? %>
            <% if !question.default_value.nil? %>
              <dt><%= _('Default value')%></dt>
              <dd>
                <% if q_format.textarea?  %>
                  <div class="display-readonly-textarea-content">
                    <%= sanitize question.default_value %>
                  </div>
                <% else %>
                  <%= sanitize question.default_value %>
               <% end %>
           </dd>
            <% end %>
          <% end %>
          <!-- Format title -->
          <dt><%= _('Answer format')%></dt>
          <dd>
            <%= q_format.title + "."%>
            <% if q_format.option_based? %>
              <%= _('Additional comment area will be displayed.')%>
            <% else %>
              <%= _('No additional comment area will be displayed.')%>
            <% end %>
          </dd>
          <!-- Suggested answer or Example-->
          <% if !question.section.phase.template.org.funder? %>
            <% example_answer = question.example_answers(template.base_org.id).first %>
              <% if example_answer.present?  && example_answer.text.present?  %>
                  <dt><%= _('example answer')%></dt>
                  <dd>
                    <% if q_format.textarea?  %>
                      <div class="display-readonly-textarea-content">
                        <%= sanitize example_answer.text %>
                      </div>
                    <% else %>
                       <%= sanitize example_answer.text %>
                    <% end %>
                  </dd>
                  
              <% end %>
          <% end %>
          <!-- Guidance linked to this question -->
          <% guidance = question.guidance_annotation(template.base_org.id) %>
          <% if guidance.present?  %>
            <dt><%= _('Guidance')%></dt>
            <dd>
              <div class="display-readonly-textarea-content">
                <%= sanitize guidance.text %>
              </div>
            </dd>
          <% end %>
          <!-- Themes -->
          <% themes_q = question.themes %>
          <% if !themes_q.nil? %>
              <dt><%= _('Themes')%></dt>
              <dd><%= themes_q.length <= 0 ? _('No themes selected') : themes_q.join(', ') %></dd>
          <% end %>
        </dl>
      </div>
      
      <div class="col-md-4">
        <% has_org_themed_guidance = false %>
        <% themes_q = question.themes %>
        <% if !themes_q.nil? %>
          <div class="panel-group" id="<%= question.id %>-guidance">
            <% ggs = GuidanceGroup.where(org_id: current_user.org.id) %>
            <h4><%= _("Themed Guidance") %></h4>
            
            <% if ggs.length > 0 %>
              <%# To determine if any themes associated with question exist. %>
              <% ggs.each do |guidance_group| %>
                <% themes_q.each do |theme| %>
                  <% theme_guidances = theme.guidances.where(
                    guidances: { guidance_group_id: guidance_group.id }
                    ) %>
                  <% if theme_guidances.length > 0 %>
                    <% has_org_themed_guidance = true %>
                    <p><%= _("Click the links below to view organisational guidance
                        related to the themes associated with this question.") %></p>
                      <% break %>
                  <% end %>
                <% end %>
              <% end %>
              
              <% if has_org_themed_guidance %>
                <% ggs.each do |guidance_group| %>
                  <% themes_q.each do |theme| %>
                    <% theme_guidances = theme.guidances.where(
                      guidances: { guidance_group_id: guidance_group.id }
                      ) %>
                    <% if theme_guidances.length > 0 %>
                      <% theme_guidances.each do |guidance| %>
                        <div class="panel panel-default">
                          <div class="heading-button"
                               role="button"
                               data-toggle="collapse"
                               href="#collapseGuidance-<%= guidance.id%>-<%= question.id %>"
                               aria-expanded="false"
                               aria-controls="#collapseGuidance-<%= guidance.id%>-<%= question.id %>">
                               
                            <div class="panel-heading"
                                        role="tab"
                                        id="#headingGuidance-<%= guidance.id%>-<%= question.id %>">
                              <div class="panel-title">
                                  <i class="fa fa-plus pull-left" aria-hidden="true"></i>
                                &nbsp;<%= theme.title %>
                                <% if ggs.length > 1 %>
                                  &nbsp;(<%= guidance_group.name %>)
                                <% end %>
                              </div>
                              <div class="clearfix"></div>
                            </div>
                          </div>
                          <div id="collapseGuidance-<%= guidance.id%>-<%= question.id %>"
                               class="panel-collapse collapse"
                               role="tabpanel"
                               aria-labelledby="headingGuidance-<%= guidance.id%>-<%= question.id %>">
                            <div class="panel-body allow-break-words">
                              <div class="display-readonly-textarea-content">
                                <%= sanitize guidance.text %>
                              </div>
                            </div>
                        </div>
                      </div>
                    <% end %>
                   <% end %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        </div>
        <% if has_org_themed_guidance %>
          <br>
          <p><em><%= _("Note: New plans will automatically display this guidance.
            Users then have the ability to hide/display the guidance when editing their plan.") %></em></p>
          <% else %>
            <p><%= _("There is no organisational guidance related to the themes associated with this question.") %><p>
        <% end %>
      </div>
    </div>
    
    <div class="row">
      <div class="col-md-12">
        <% if template.latest? %>
          <% if template.customization_of.present? %>
            <% if section.modifiable? %>
              <h4> <%= _('Annotations') %> </h4>
              <dl class="dl-horizontal">
                <% question.annotations_per_org(current_user.org_id).each do |annotation| %>
                  <dt><%= annotation.type.humanize %></dt>
                  <dd>
                    <div class="display-readonly-textarea-content">
                      <%= annotation.text.present? ? sanitize(annotation.text) : _('None provided') %>
                    </div>
                  </dd>
                <% end %>
              </dl>
            <% else %>
              <h4> <%= _('Annotations') %> </h4>
              <%= form_for(question, html: { method: 'put', class: 'question_form' },
                  url: org_admin_template_phase_section_question_path(template_id: template.id,
                  phase_id: question.section.phase.id,
                  section_id: question.section.id,
                  id: question.id)) do |f| %>
                <%# example_answer and guidance annotations as nested fields %>
                <% question.annotations_per_org(current_user.org_id).each do |annotation| %>
                  <%= f.fields_for(:annotations, annotation) do |annotation_fields| %>
                    <%= render partial: 'org_admin/annotations/form',
                               locals: { f: annotation_fields } %>
                  <% end %>
                <% end %>
                <div class="form-group col-md-10">
                  <div class="pull-right">
                    <%= f.submit _('Save'), class: "btn btn-default", role: 'button' %>
                  </div>
                </div>
              <% end %>
            <% end %>
          <% end %>
          <% if section.modifiable? %>
            <div class="form-group col-md-10">
              <div class="pull-right">
                <%= link_to _('Edit'), edit_org_admin_template_phase_section_question_path(template_id: question.section.phase.template.id, phase_id: question.section.phase.id, section_id: question.section.id, id: question.id), class: "btn btn-default ajaxified-question", remote: true %>
              </div>
            </div>
          <% end %>
        <% else %>
          <% if template.customization_of.present? %>
            <h4> <%= _('Annotations') %> </h4>
            <dl class="dl-horizontal">
              <% question.annotations_per_org(current_user.org_id).each do |annotation| %>
                <dt><%= annotation.type.humanize %></dt>
                <dd>
                  <div class="display-readonly-textarea-content">
                    <%= annotation.text.present? ? sanitize(annotation.text) : _('None provided') %>
                  <div class="display-readonly-textarea-content">
                </dd>
              <% end %>
            </dl>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
  <div class="col-md-5">
    <%#= render partial: 'guidances/guidance_display', locals: {question: question} %>
  </div>
</div>
