pupilfirst/pupilfirst

<% presenter = ::Home::IndexPresenter.new(self, current_school) %>
<% content_for(:head) do %>
  <title><%= presenter.page_title %></title>
<% end %>
<div class="pt-18 pb-10 bg-gray-50">
  <div class="relative bg-gray-300 border-b">
    <div class="relative pb-1/2 md:pb-1/4">
      <% if presenter.cover_image.present? %>
        <img
          class="absolute h-full w-full object-cover"
          src="<%= presenter.cover_image %>"
        />
      <% else %>
        <div
          class="school-index__cover-default absolute h-full w-full svg-bg-pattern-6"
        ></div>
      <% end %>
    </div>
  </div>
  <div class="max-w-4xl 2xl:max-w-5xl mx-auto">
    <div
      class="school-index__about flex relative bg-primary-900 shadow-xl rounded-lg mx-3 lg:mx-0 -mt-7"
    >
      <div class="text-center relative mx-auto flex flex-col justify-center text-white px-6 py-8 md:p-10">
        <p class="md:text-xl"><%= t('.welcome_prefix') %></p>
        <h1 class="leading-tight text-3xl md:text-5xl">
          <span> <%= current_school.name %> </span>
        </h1>
        <% if current_school.about.present? %>
          <div
            class="w-full max-w-2xl mt-2 leading-relaxed relative flex items-center justify-center rounded"
          >
            <div
              class="convert-markdown text-sm lg:text-base"
              data-json-props="<%= { markdown: current_school.about, profile: "areaOfText" }.to_json %>"
            ></div>
          </div>
        <% end %>
      </div>
    </div>
    <% if presenter.courses.any? %>
      <div>
        <div class="mx-auto text-center pt-8 mt-8">
          <h2
            class="school-index-featured-courses__header relative text-2xl font-bold"
          >
            <%= t('.featured_courses_heading') %>
          </h2>
        </div>
        <div class="mx-auto">
          <div
            class="flex flex-wrap flex-1 lg:-mx-5 <%= presenter.courses.one? ? 'justify-center' : '' %>"
          >
            <% presenter.courses.map do |course| %>
              <div class="w-full px-3 lg:px-5 md:w-1/2 mt-6 md:mt-10">
                <div
                  class="flex overflow-hidden shadow bg-white rounded-lg flex-col h-full"
                  aria-label="<%= course.name %>"
                >
                  <div class="relative">
                    <div class="relative pb-1/2 bg-gray-50">
                      <% if presenter.course_thumbnail(course).present? %>
                        <img
                          alt="Thumbnail for course <%= course.name %>"
                          class="absolute h-full w-full object-cover"
                          src="<%= presenter.course_thumbnail(course) %>"
                        />
                      <% else %>
                        <div
                          class="school-index-course__cover absolute h-full w-full svg-bg-pattern-1"
                        ></div>
                      <% end %>
                    </div>
                  </div>
                  <div class="flex gap-2 border-b border-gray-200">
                    <div class="block h-min ms-6 pt-3 pb-2 px-2 bg-primary-100 rounded-b-full">
                      <i class="if i-book-solid if-fw text-primary-400">s</i>
                    </div>
                    <h4
                  class="w-full text-black font-semibold leading-tight pe-6 py-3 text-lg md:text-xl">
                      <%= course.name %>
                    </h4>
                  </div>
                  <div class="flex flex-col justify-between h-full">
                    <div
                      class="school-index-course__description text-sm px-6 pt-6 w-full leading-relaxed"
                    >
                      <%= course.description %>
                    </div>
                    <div class="flex w-full p-6 justify-center">
                      <% case presenter.courses_as_student[course.id] %>
                      <% when nil %>
                      <a
                          class="w-full btn <%= course.public_signup? ? 'btn-primary' : 'btn-default' %>"
                          href="/courses/<%= course.id %>"
                        >
                        <% if course.public_signup? %>
                          <i class="fas fa-feather-alt me-2"></i>
                          <%= t('.get_started') %>
                        <% else %>
                          <i class="fas fa-info-circle me-2"></i>
                          <%= t('.learn_more') %>
                        <% end %>
                      </a>
                      <% when :dropped_out %>
                      <div
                          class="w-full bg-red-100 text-red-600 py-2 px-4 rounded flex text-sm font-semibold justify-center items-center"
                        >
                        <i class="fas fa-user-slash me-2"></i>
                        <%= t('.dropped_out') %>
                      </div>
                      <% when :access_ended %>
                      <a
                          class="w-full btn btn-secondary"
                          href="/courses/<%= course.id %>/curriculum"
                        >
                        <i class="fas fa-eye me-2"></i>
                        <%= t('.access_ended') %>
                      </a>
                      <% when :active %>
                      <a
                          class="w-full btn btn-secondary"
                          href="/courses/<%= course.id %>/curriculum"
                        >
                        <i class="fas fa-book me-2"></i>
                        <%= t('.active') %>
                      </a>
                    <% else %>
                      <% raise "Encountered unexpected course status #{presenter.courses_as_student[course.id]}" %>
                    <% end %>
                  </div>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  <% end %>
</div>
</div>