pupilfirst/pupilfirst

<% content_for(:head) do %>
  <title>
    <%= "#{t('.page_title')} |
    #{current_school.name}" %>
  </title>
<% end %>
<div class="h-full bg-gray-50 py-10 md:py-24">
  <div
    class="container mx-auto max-w-lg px-4 py-6 sm:py-8 bg-white rounded-lg shadow"
  >
    <%= image_tag 'users/sessions/reset-password-icon.svg', class: 'mx-auto w-32 sm:w-42', alt: t('.image_alt') %>
    <div
      class="max-w-sm mx-auto text-lg sm:text-2xl font-bold text-center mt-4"
    >
      <%= t('.heading') %>
    </div>
    <%= form_with(url: user_send_reset_password_email_path, method: :post, class: 'max-w-sm mx-auto md:px-9 pb-4', local: true) do |f| %>
      <div class="text-sm mt-2 text-center pb-3">
        <%= t('.subtitle') %>
      </div>
      <label
        class="inline-block tracking-wide text-gray-900 text-xs font-semibold"
        for="email"
      >
        <%= t('.email_label') %>
      </label>
      <%= f.email_field :email, maxlength: 256, placeholder: t('.email_placeholder'), required: true, class: 'appearance-none h-10 mt-1 block w-full text-gray-800 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', tabindex: 1 %>
      <%= f.submit t(".submit_button"), data: { disable: true }, class: "btn btn-primary btn-large text-center w-full mt-4 me-2", tabindex: 2 %>
      <% 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: 'user_password_reset',
            site_key: ENV['RECAPTCHA_V3_SITE_KEY'],
            nonce: content_security_policy_nonce,
          )
        %>
      <% end %>
    <% end %>
    <div class="max-w-sm mx-auto md:px-9 flex flex-col justify-items-center">
      <a
        href="/users/sign_in"
        class="w-full p-3 text-primary-500 leading-snug rounded-lg underline cursor-pointer text-sm text-center
      font-semibold hover:bg-gray-50 focus:bg-gray-50 focus:outline-none"
        tabindex="6"
      >
        <%= t('.cancel_link') %>
      </a>
    </div>
  </div>
</div>