<!-- add a section and one question. Version is passed as an argument-->
<% new_section = Section.new %>
<% new_section.number = phase.sections.count + 1 %>
<%= form_for new_section, { url: admin_create_section_path, html: { class: 'form-horizontal' }} do |f| %>
  <%= f.hidden_field :phase_id, value: phase.id %>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <div class="col-md-6">
          <%= f.text_field(:title, { class: 'form-control', 'aria-required': false, placeholder: _('Enter a title for the section') } ) %>
        </div>
        <div class="clearfix"/>
      </h4>
    </div>
    <div class="panel-body">
      <div class="form-group">
        <%= f.label(:number, _('Order of display'), class: 'col-md-2 control-label') %>
        <div class="col-md-8">
          <%= f.number_field(:number, in: 1..15, class: 'form-control', 'aria-required': false) %>
        </div>
        <div class="col-md-2">
          <%= render partial: '/shared/tooltip', locals: { aria_label: _('Order of display'), placement: 'top', title: _('This allows you to order sections.') } %>
        </div>
      </div>
      <div class="form-group">
        <%= f.label(:description, _('Description'), class: 'col-md-2 control-label') %>
        <div class="col-md-8">
          <%= text_area_tag('section-desc', '', class: 'tinymce') %>
        </div>
        <div class="col-md-2">
          <%= render partial: '/shared/popover', locals: { aria_label: _('Description'), placement: 'top', title: _('More information: Section descriptions'), content: _("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>
      <div class="pull-right">
        <%= f.button(_('Save'), class: "btn btn-default", type: "submit") %>
        <%= link_to(_('Cancel'), '#', { class: "btn btn-default section_new_cancel", role: "button" }) %>
      </div>
    </div>
  </div>
<% end %>