<div class="row">
  <div class="col-md-12">
    <!-- render the project title -->
    <h1><%= @plan.title %></h1>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="tabbed-area">
      <!-- render navigation tabs for the project-->
      <ul class="tabs" role="tablist">
        <li id="details-tab" role="tab" aria-controls="details-panel" class="active">
          <a href="#details-panel" aria-selected="true"><%= _('Project Details') %></a>
        </li>

        <% @plan.template.phases.each do |phase| %>
          <li id="phase-#<%= phase.id %>-tab" role="tab" aria-controls="phase-#<%= phase.id %>-panel">
            <a href="<%= edit_plan_phase_path(@plan, phase) %>" aria-selected="false">
              <%= (@plan.template.phases.length > 1 ? phase.title : _('Write Plan')) %>
            </a>
          </li>
        <% end %>

        <li id="share-tab" role="tab" aria-controls="share-panel">
          <a href="<%= share_plan_path(@plan) %>" aria-selected="false"><%= _('Share') %></a>
        </li>
        <li id="download-tab" role="tab" aria-controls="download-panel">
          <a href="<%= show_export_plan_path(@plan) %>" aria-selected="false"><%= _('Download') %></a>
        </li>
      </ul>

      <!-- project details -->
      <div class="tab-panels" role="tabpanel">
        <div id="details-panel" class="tab-panel active" aria-hidden="false" aria-labelledby="details-tab">
          <% if @plan.editable_by?(current_user) %>
            <%= render partial: 'edit_details', locals: {plan: @plan, visibility: @visibility} %>
          <% else %>
            <%= render partial: 'show_details', locals: {plan: @plan, visibility: @visibility} %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>