<%- model_class = Phase -%>

<div class="row">
  <div class="col-md-12">
    <h1><%= @template.title %></h1>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="tabbed-area">
      <!-- render navigation tabs for the template-->
      <%= render partial: "templates/admin_nav_tabs", locals: {template: @template, active: "add_plan"} %>

      <div class="tab-panels project-tabs-body" role="tabpanel">
        <!-- phase main container -->
        <div id="add-phase-panel" class="tab-panel active project-tabs-body"
             aria-hidden="false" aria-labelledby="add-phase-tab">

          <div class="accordion">
            <h2><%= _('Phase details')%></h2>
            
            <!--phase details -->
            <div class="phase_details">
              <div class="phase_details_body">
                <!-- add phase details -->
                <p>
                <%= _('When you create a new phase for your template, a version will automatically be created. Once you complete the form below you will be provided with options to create sections and questions.') %></p>
                <%= form_for :phase, {url: admin_create_phase_path, html: {class: "roadmap-form"}} do |f| %>
                  <%= f.hidden_field :template_id, value: @template.id%>
                  
                  <fieldset class="side-by-side">
                    <div class="form-input">
                      <%= f.label :title %>
                      <%= f.text_field :title, as: :string,
                        class: "text_field has-tooltip", "data-toggle" => "tooltip", "title" => _('Enter a title for the phase e.g. intial DMP, full DMP... This is what users will see in the tabs when completing a plan. If you only have one phase, call it something generic e.g. Glasgow DMP') %>
                    </div>
                    <div class="form-input">
                      <%= f.label _('Order of display'), for: :number %>
                      <%= f.number_field :number, in: 1..5, class: "number_field has-tooltip", "data-toggle" => "tooltip", title: _('This allows you to order the phases of your template.') %>
                    </div>
                    <div class="form-input">
                      <%= f.label :description %>
                      <%= text_area_tag("phase-desc","" , class: "tinymce") %>
                      <div class="inline">
                        <a href="#" data-toggle="popover" rel: "popover" data-html: "true" role="button" 
                           data-content="<%= _("Enter a basic description. This will be presented to users on the 'Admin Plan' tab, above the summary of the sections and questions which they will be asked to answer.") %>"
                           aria-label="<%= _('More information: Phase descriptions') %>">
                        <span class="fa fa-question-circle" aria-hidden="true"></span></a>
                      </div>
                    </div>
                  
                    <br />
                    <div class="form-input">
                      <div class="button-spacer">&nbsp;</div>
                      <%= f.submit _('Save'), class: "btn btn-primary" %>
                      <%= link_to _('Cancel'), admin_template_template_path(@template), class: "btn cancel" %>
                    </div>
                  </fieldset>
                <% end %>
              </div>
            </div>
            
          </div><!-- close accordion -->
        </div><!-- close tab panel -->
        
      </div><!-- close tab panels -->
    </div><!-- close tabbed area -->
  </div>
</div>