<!--
**Project: DMPRoadmap
**Description: This block edits a section and its questions.
**Arguments transferred: 'section'
**Copyright: Digital Curation Centre and University of California Curation Center
-->


<%= form_for(section, url: admin_update_section_path(section, phase: phase, edit: edit), html: { method: :put}) do |s| %>
  <% if @open && @section_id == section.id then%>
    <% toggle = 'accordion-body  section-collapse in collapse'%>
  <% else %>
    <% toggle = 'accordion-body collapse section-collapse' %>
  <% end %>

 <% if @new_sec %>
    <% toggle = 'accordion-body  section-collapse in collapse'%>
 <% end %>

  <div class="accordion-group" >
    <div class="accordion-heading">
      <div class="div_left make_div_smaller">
        <div class="accordion_heading_text">
          <%= s.text_field :title, as: :string, class: 'text_field', placeholder: _('New section title') %>

        </div>
      </div>
      <div class="div_right make_div_longer">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#sections-accordion" href="#collapse-sec-<%= section.id %>">
          <!-- + or - icon-->
              <span class="icon-plus icon-white accordion-icon"> </span>
            </a>
      </div>
    </div>


    <div id="collapse-sec-<%= section.id %>" class="<%= toggle %>" >
      <div class="accordion-inner">
        <table class="dmp_details_table">
          <tr>
            <td class="first_template"><%= _('Order of display') %></td>
            <td><%= s.number_field :number, in: 1..15, class: "number_field has-tooltip", 'data-toggle' => "tooltip", 'title' => _('This allows you to order sections.') %></td>
          </tr>
          <tr>
            <td class="first_template"><%= _('Description') %></td>
            <td class="phase_table_last_column">
              <div class="div_left_icon">
                <%= text_area_tag("section-desc-#{section.id}", section.description , class: "tinymce") %>
              </div>
              <div class="div_right_icon">
                <%= link_to( image_tag('help_button.png'), '#', class: 'section_desc_popover', rel: "popover", 'data-html' => "true", 'data-content' => _("<div class='tooltip_box'>Enter a basic description. This could be a summary of what is covered in the section or instructions on how to answer. This text will be displayed in the coloured banner once a section is opened to edit.</div>"))%>
              </div>
            </td>
          </tr>
        </table>
        <!-- save buttons-->
        <div class="move_2_right">
          <%= s.submit _('Save'), class: 'btn btn-primary' %>
          <% if section.modifiable %>
            <%= link_to _('Delete'), admin_destroy_section_path(section_id: section.id),
            confirm: _("You are about to delete '%{section_title}'. This will affect questions linked to this section. Are you sure?") % { :section_title => section.title }, method: :delete, class: "btn btn-primary"%>
          <% end %>
          <%= link_to _('Cancel'), :back, class: 'btn cancel' %>
        </div>
<% end %>
        <div class="two-column-clear question-divider"></div>
        <% @questions = section.questions.order("number")%>
        <% if @questions.length > 0 %>
          <% question_left = @questions.length %>
          <% @questions.each do |question| %>
            <div class="question_guidance_block">
              <div id="show_question_div_<%= question.id%>" class="<%= if question.id == @question_id then "current_question" end %>">
                <!-- render the show question block-->
                <%= render partial: 'questions/show_question', locals: {question: question} %>
              </div>

              <div id="edit_question_div_<%= question.id%>"  style="display: none">
                <!-- render the edit question block-->
                <%= render partial: 'questions/edit_question', locals: {question: question} %>
              </div>
            </div>
            <!--verify how many questions are left -->
            <% if question_left.to_i > 1  %>
                <div class="two-column-clear question-divider"></div>
            <% else %>
                <div class="two-column-clear"></div>
            <% end %>
            <% question_left = question_left - 1 %>

          <% end %>
        <% end %>

        <!-- Add a new question if the version is not published-->
        <% if section.modifiable %>

          <% if @questions.length != 0 %>
            <div class="two-column-clear question-divider"></div>
          <% end%>
          <!-- add question block -->
          <div id="add_question_block_div_<%= section.id%>" style="display: none">
            <%= render partial: 'questions/add_question', locals: {section: section} %>
          </div>

          <!-- add question button-->
          <div id="add_question_button_div_<%= section.id%>">
            <div class="div_left">
              <%= hidden_field_tag :section_id, section.id, class: "section_id" %>
              <%= link_to _('Add question'), '#', class: "btn btn-primary add_question_button" %>
            </div>
          </div>
        <% end %>

        <div class="two-column-clear"></div>
      </div>
    </div>
  </div>