<hr>
<div class="row" id="<%= dom_id(phase) %>">
  <div class="col-md-12">
    <div>
      <h3>
        <%= phase.title %>
        <div class="pull-right">
          <% if template.customization_of.present? && template.latest? %>
            <%= link_to _('Customise phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
          <% elsif modifiable %>
            <%= link_to _('Edit phase'), edit_org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
          <% else %>
            <%= link_to _('Show phase'), org_admin_template_phase_path(template.id, phase.id), { class: "btn btn-default", role: 'button' } %>
          <% end %>
          <% if template.latest? && phase.modifiable %>
            <%= link_to _('Delete phase'), org_admin_template_phase_path(template.id, phase.id),
                        data: { confirm: _("You are about to delete the '%{phase_title}' phase. This will remove all of the sections and questions listed below. Are you sure?") % { phase_title: phase.title },
                                length: 20, omission: _('... (continued)') }, method: :delete, class: 'btn btn-default', role: 'button' %>
          <% end %>
        </div>
      </h3>
      <p class="pull-left">
        <div class="display-readonly-textarea-content">
          <%= sanitize phase.description %>
        </div>
      </p>
    </div>
  </div>

  <div class="col-md-12">
    <% if phase.sections.any? %>
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col"><%= _('Sections')%></th>
              <th scope="col"><%= _('Questions')%></th>
            </tr>
          </thead>
          <tbody>
            <% phase.sections.each do |section| %>
              <tr id="<%= dom_id(section) %>" data-number="<%= section.number %>">
                <td>
                  <p>
                    <div class="display-readonly-textarea-content">
                      <%= section.title %>
                    </div>
                  </p>
                </td>
                <td>
                  <% if section.questions.present? %>
                    <ul>
                      <% section.questions.each do |question| %>
                        <li>
                          <%= sanitize question.text %>
                          <% if question.question_options.length > 0 %>
                            <ul>
                              <% question.question_options.each do |option| %>
                                <li><%= option.text %></li>
                              <% end %>
                            </ul>
                          <% end %>
                        </li>
                      <% end %>
                    </ul>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% end %>
  </div>
</div>