pupilfirst/pupilfirst

<% presenter = Courses::LeaderboardPresenter.new(self, @course, @on) %>
<% content_for(:head) do %>
  <title>Leaderboard | <%= presenter.school_name %></title>
<% end %>
<% content_for(:inner_wrapper) do %>
  <div class="bg-gray-50 pt-11 pb-8 -mt-7">
    <div class="max-w-3xl mx-auto">
      <div class="text-center mx-3">
        <p class="inline-block bg-primary-100 text-primary-900 border border-primary-500 text-xs mx-auto text-center px-4 py-2 rounded-lg">
          <%= t(".note_html") %>
        </p>
      </div>
      <div class="w-full md:px-4 text-center mt-4">
        <div class="leaderboard__header-container">
          <div class="w-5/6 lg:w-2/3 mx-auto">
            <div>
              <% if presenter.students.any? %>
                <div class="flex justify-center">
                  <% if presenter.toppers.count > 3 %>
                    <% presenter.toppers[0..1].each do |student| %>
                      <%= render 'topper_avatar', student: student %>
                    <% end %>
                  <% else %>
                    <% presenter.toppers.each do |student| %>
                      <%= render 'topper_avatar', student: student %>
                    <% end %>
                  <% end %>
                  <% if presenter.toppers.count > 3 %>
                    <div class="leaderboard__winner-avatar flex items-center justify-center font-bold bg-gray-300">
                      +<%= presenter.toppers.count - 2 %>
                    </div>
                  <% end %>
                </div>
                <h4 class="leaderboard__winner-title pb-3 mt-3 font-normal leading-snug text-primary-900"><%= presenter.heading %></h4>
                <div class="leaderboard__students-count-container bg-gray-50 flex mx-auto overflow-hidden border rounded-lg justify-center">
                  <div class="w-1/2 px-2 pt-2 pb-1" data-t='active students count'>
                    <p class="text-xs"><%= t(".active_students") %></p>
                    <span class="text-xl font-semibold"><%= presenter.students.count %></span>
                  </div>
                  <div class="w-1/2 px-2 pt-2 pb-1" data-t='inactive students count'>
                    <p class="text-xs"><%= t(".inactive_students") %></p>
                    <span class="text-xl font-semibold"><%= presenter.inactive_students_count %></span>
                  </div>
                </div>
              <% end %>
              <div class="flex items-center justify-center max-w-xs mx-auto h-10 mb-3 mt-5">
                <% if presenter.previous_page? %>
                  <a class="text-primary bg-white hover:bg-primary-100 hover:text-primary-600 hover:border-primary-300 hover:shadow-md focus:bg-primary-600 focus:text-white focus:shadow-inner px-4 py-2 h-full flex items-center justify-center border border-gray-300 rounded-lg" href="<%= presenter.previous_page_link %>">
                    <i class="fas fa-angle-left text-lg"></i>
                  </a>
                <% end %>
                <span class="bg-white px-6 py-2 text-sm flex items-center shrink-0 h-full mx-1 md:mx-2 font-semibold border border-gray-300 rounded-lg">
                  <%= presenter.start_date %> - <%= presenter.end_date %>
                </span>
                <% if presenter.next_page? %>
                  <a class="text-primary bg-white hover:bg-primary-100 hover:text-primary-600 hover:border-primary-300 hover:shadow-md focus:bg-primary-600 focus:text-white focus:shadow-inner px-4 py-2 h-full flex items-center justify-center border border-gray-300 rounded-lg" href="<%= presenter.next_page_link %>">
                    <i class="fas fa-angle-right text-lg"></i>
                  </a>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
      <% if presenter.students.empty? %>
        <div class="leaderboard__inactive-startup-message text-center bg-white border shadow rounded-lg px-3 md:px-5 mx-3 py-8 my-4">
          <h4 class="font-semibold">
            <%= t(".no_entries") %>
          </h4>
        </div>
      <% else %>
        <div class="leaderboard__table-container w-full bg-white border-t border-b md:border border-gray-300 scrolling-touch shadow-lg overflow-x-auto lg:overflow-hidden lg:rounded-lg">
          <table class="w-full mb-2 border-collapse relative">
            <thead class="bg-gray-50">
              <tr>
                <th class="py-3 px-3 bg-grey-100 font-bold uppercase text-sm border-b"><%= t(".rank") %></th>
                <th class="py-3 px-3 bg-grey-100 font-bold uppercase text-sm border-b"><%= t(".change") %></th>
                <th class="py-3 px-3 bg-grey-100 font-bold uppercase text-sm border-b "><%= t(".student") %></th>
                <th class="py-3 px-3 bg-grey-100 font-bold uppercase text-sm border-b"><%= t(".score") %></th>
              </tr>
            </thead>
            <tbody>
              <% presenter.students.each do |student| %>
                <tr class="<%= student.current_student? ? 'leaderboard__current-student-row shadow-lg' : 'leaderboard__student-row' %>">
                  <td class="py-3 px-3 border-b font-bold text-center">
                    <span><%= student.rank %></span>
                  </td>
                  <td class="py-3 px-3 border-b font-semibold text-sm text-center">
                    <% if student.delta.blank? %>
                      <span class="leaderboard__rank-change-new"><%= t(".new_new") %></span>
                    <% else %>
                      <span class="leaderboard__rank-change-icon inline-block me-1">
                        <%= presenter.rank_change_icon(student.delta) %>
                      </span>
                    <% end %>
                    <span class="leaderboard__rank-delta font-semibold"><%= presenter.format_delta(student.delta) %></span>
                  </td>
                  <td class="py-3 px-3 border-b  text-sm">
                    <span class="font-semibold inline-block leading-tight"><%= student.name %></span>
                    <span class="leaderboard__student-affiliation block text-xs text-gray-600 leading-tight"> <%= student.user.affiliation %></span>
                  </td>
                  <td class="py-3 px-3 border-b text-center font-semibold text-sm"><%= student.score %></td>
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      <% end %>
    </div>
  </div>
<% end %>