pupilfirst/pupilfirst

<div class="md:pt-18 bg-gray-50 relative">
  <section class="bg-gray-50">
    <div class="max-w-5xl mx-auto px-4 pt-4 md:px-6 md:pt-6">
      <% if @organisation %>
        <div class="mt-4 overflow-x-auto">
          <%= render 'shared/breadcrumbs', crumbs: [[t('shared.my_org'), "/organisations"], [@organisation.name, organisation_path(@organisation)], [@cohort.course.name, active_cohorts_organisation_course_path(@organisation, @cohort.course)], [@cohort.name]] %>
        </div>
      <% end %>
      <h1 class="text-xl md:text-3xl font-bold mt-4 break-words">
        <%= @cohort.name %>
      </h1>
      <p class="text-sm font-medium"><%= @cohort.course.name %></p>
      <div class="mt-6 flex gap-4 items-center border-b border-gray-300 text-sm">
        <p class="p-2 border-b-2 border-primary-500 text-primary-500 font-semibold"><%= t('.overview_link') %></p>
        <%= link_to t('.students_link'), students_path, class: "p-2 hover:text-primary-500 hover:bg-primary-100" %>
      </div>
    </div>
  </section>
  <%
    total_students_count = @presenter.counts[:total]
    milestone_completion_status = @presenter.milestone_completion_status if total_students_count > 0
  %>
  <section class="bg-white">
    <div class="grid md:grid-cols-12 gap-6 max-w-5xl p-4 md:p-6 mx-auto">
      <div class="md:col-span-8 mt-2 order-2 md:order-1">
        <% if (total_students_count > 0 or milestone_completion_status.present?) && (@presenter.targets_with_milestone.present?) %>
          <h3 class="font-semibold"><%= t('.student_distribution_by_milestone') %></h3>
          <div class="mt-4">
            <div class="max-w-5xl mx-auto">
              <div class="grid gap-x-8 gap-y-6">
                <% @presenter.targets_with_milestone.each do |target| %>
                  <% milestone_stats = milestone_completion_status[target.id] %>
                  <div>
                    <div class="flex justify-between">
                      <p class="text-xs font-medium"><%= "#{t("shared.m")}#{target.assignments.first.milestone_number}: #{target.title}" %></p>
                      <div class="flex space-x-2">
                        <p class="text-xs font-medium text-gray-500"><%= "#{milestone_stats[:students_count]}/#{total_students_count}" %></p>
                        <p class="text-center text-xs font-medium rounded-sm px-1 bg-gray-200"><%= "#{milestone_stats[:percentage]}%" %></p>
                      </div>
                    </div>
                    <%= link_to @organisation ? students_organisation_cohort_path(@organisation, @cohort, milestone_completed: "#{target.id};#{t("shared.m")}#{target.assignments.first.milestone_number}: #{target.title}") : students_cohort_path(milestone_completed: "#{target.id};#{t("shared.m")}#{target.assignments.first.milestone_number}: #{target.title}"), class:'flex relative bg-gray-200 border border-transparent rounded-md overflow-hidden mt-1 hover:border-primary-300 hover:bg-primary-100 focus:outline-none focus:bg-primary-100 focus:text-primary-500 focus:ring-2 focus:ring-focusColor-500 transition' do %>
                      <span style="<%= "width: #{milestone_stats[:percentage]}%" %>" class="flex h-3 text-center bg-green-500"></span>
                    <% end %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
        <% else %>
          <div class="max-w-5xl mx-auto text-center justify-center items-center text-sm italic mt-4 pt-4">
            <%= t('.no_students') if total_students_count == 0 %>
            <%= t('.no_milestones') if @presenter.targets_with_milestone.empty? %>
          </div>
        <% end %>
      </div>
      <div class="mt-4 md:col-span-4 order-1 md:order-2">
        <div class="grid grid-cols-1 gap-5 bg-gray-50 p-4 rounded-md">
          <div class="p-4 md:p-5 bg-white flex flex-col gap-2 shadow rounded-lg">
            <p class="text-sm text-gray-600"><%= t('.total_students') %></p>
            <p class="text-3xl font-bold"><%= total_students_count %></p>
            <%= link_to students_path, class: "text-sm font-medium text-primary-500 hover:text-primary-800 hover:underline" do %>
              <span><%= t('.view_all')%></span><i class="if i-arrow-right-regular rtl:rotate-180 inline-block text-primary-500 ms-2" aria-hidden="true"></i>
            <% end %>
          </div>
          <div class="p-4 md:p-5 bg-white flex flex-col gap-2 shadow rounded-lg">
            <p class="text-sm text-gray-600"><%= t('.students_completed') %></p>
            <p class="text-3xl font-bold"><%= @presenter.counts[:completed] %></p>
            <%= link_to students_completed_path, class: "text-sm font-medium text-primary-500 hover:text-primary-800 hover:underline" do %>
              <span><%= t('.view_all')%></span><i class="if i-arrow-right-regular rtl:rotate-180 inline-block text-primary-500 ms-2" aria-hidden="true"></i>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>