<%- model_class = Phase -%>
<%= stylesheet_link_tag "admin" %>
<% javascript 'admin.js' %>

<%= tinymce content_css: asset_path('application.css') %>

<h1>
  <%= @phase.template.title %>
  <!-- link button to add new guidance -->
  <div class="move_2_right">
    <%= link_to t("org_admin.templates.view_all_templates"),
      admin_index_template_path,
      class: 'btn btn-primary' %>
  </div>
</h1>

<div class="div_clear"></div>

<!-- render navigation tabs for the template-->
<%= render partial: "admin_nav_tabs", locals: {template: @phase.template, active: @phase.id} %>

<!-- phase main container -->
<div class="project-tabs-body">
  <div class="accordion" id="sections-accordion">

    <!--phase details -->
    <div class="phase_details">
      <div class="phase_details_body">

        <!-- display phase details-->
        <div id="show_phase_div">
          <%= render partial: "show_phase", locals: {phase: @phase}%>
        </div>
        <% if @phase.modifiable && @edit %>
          <div id="edit_phase_div" style="display: none">
            <%= render partial: "edit_phase", locals: {phase: @phase}%>
          </div>
        <% end %>
      </div>
    </div>

    <!-- sections, questions and guidance details-->
    <% @sections.order("number ASC").each do |section| %>
      <% if @edit && section.modifiable %>
        <%= render partial: 'edit_section', locals: {section: section, edit: @edit, phase: @phase} %>
      <% else %>
        <%= render partial: 'show_section', locals: {section: section}%>
      <% end %>
     <% end %>

  </div>
</div>


<% if @edit || @phase.template.customization_of.present? %>
  <!-- add section block -->
  <div id="add_section_block_div" style="display: none">
    <%= render partial: 'add_section', locals: {phase: @phase} %>
  </div>

  <!-- add section button-->
  <div id="add_section_button_div">
    <div class="div_right">
      <%= link_to t('org_admin.add_section_label'),'#', id: 'add_section_button', class: 'btn btn-primary' %>
    </div>
  </div>
<% end %>