pupilfirst/pupilfirst

<% presenter = Courses::ApplyPresenter.new(self, @course, @show_checkbox_recaptcha) %>
<% content_for(:head) do %>
  <title><%= presenter.page_title %></title>
<% end %>
<div class="flex min-h-screen bg-gray-50 items-center justify-center">
  <div class="py-8 w-full">
    <div class="container mx-auto px-3 max-w-lg">
      <div
        class="relative flex flex-col shadow-xl rounded-lg overflow-hidden bg-white border"
      >
        <div class="flex flex-col text-gray-900 bg-gray-50 text-white">
          <div class="relative pb-1/2 bg-primary-900">
            <% if presenter.thumbnail_url.present? %>
              <img
                class="absolute h-full w-full object-cover"
                src="<%= presenter.thumbnail_url %>"
              />
            <% else %>
              <div
                class="course-apply__cover-default absolute h-full w-full svg-bg-pattern-1"
              ></div>
            <% end %>
          </div>
        </div>
        <div>
          <div class="p-4 pt-5 md:px-12 md:py-12 md:pt-10">
            <%= form_with( url: apply_course_path(@course), method: :post, class: 'flex flex-col', local: true) do |f| %>
              <h4 class="font-bold">
                <%= t('.heading', course_name: presenter.course_name) %>
              </h4>
              <div class="w-full">
                <div class="mt-4">
                  <label
                    for="email"
                    class="inline-block tracking-wide text-xs font-semibold"
                  >
                    <%= t('.email_label') %>
                  </label>
                  <%= f.email_field :email, value: params[:email], maxlength: 256, placeholder: t('.email_placeholder'), required: true, class: 'appearance-none h-10 mt-1 block w-full border border-gray-300 rounded py-2 px-4 text-sm bg-gray-50 hover:bg-gray-50 focus:outline-none focus:bg-white focus:border-primary-400' %>
                </div>
                <div class="mt-4">
                  <label
                    for="name"
                    class="inline-block tracking-wide text-xs font-semibold"
                  >
                    <%= t('.name_label') %>
                  </label>
                  <%= f.text_field :name, value: params[:name], maxlength: 128, placeholder: t('.name_placeholder'), required: true, class: 'appearance-none h-10 mt-1 block w-full border border-gray-300 rounded py-2 px-4 text-sm bg-gray-50 hover:bg-gray-50 focus:outline-none focus:bg-white focus:border-primary-400' %>
                </div>
                <% if @show_checkbox_recaptcha %>
                  <div class="mt-4">
                    <%=
                      recaptcha_tags(
                        site_key: ENV['RECAPTCHA_V2_SITE_KEY'],
                        nonce: content_security_policy_nonce,
                      )
                    %>
                  </div>
                <% else %>
                  <%=
                    recaptcha_v3(
                      action: 'public_course_enrollment',
                      site_key: ENV['RECAPTCHA_V3_SITE_KEY'],
                      nonce: content_security_policy_nonce,
                    )
                  %>
                <% end %>
              </div>
              <%= f.submit t('.apply_button'), data: { disable: true }, class: "btn btn-primary btn-large text-center w-full mt-6" %>
            <% end %>
          </div>
        </div>
      </div>
      <div class="text-center mt-4 text-gray-600">
        <% if presenter.terms_and_conditions? %>
          <a
            href="/agreements/terms-and-conditions"
            class="text-xs cursor-pointer hover:text-primary-500"
          >
            <%= t('.terms_and_conditions') %>
          </a>
        <% end %>
        <% if presenter.terms_and_conditions? && presenter.privacy_policy? %>
          <span class="px-4 text-gray-500">&vert;</span>
        <% end %>
        <% if presenter.privacy_policy? %>
          <a
            href="/agreements/privacy-policy"
            class="text-xs cursor-pointer hover:text-primary-500"
          >
            <%= t('.privacy_policy') %>
          </a>
        <% end %>
      </div>
    </div>
  </div>
</div>