<div>
  <div class="relative min-h-screen grid bg-black">
    <div class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0 ">
      <div
        class="sm:w-1/2 xl:w-3/5 bg-primary-500 h-full hidden md:flex flex-auto items-center justify-center p-10 overflow-hidden  text-white bg-no-repeat bg-cover relative"
        style="background-image: url(/images/education.jpg); background-position: 0% 60%;"
      >
        <div class="absolute bg-black  opacity-25 inset-0 z-0"></div>
        <div class="w-full  lg:max-w-2xl md:max-w-md z-10 items-center text-center ">
          <div class=" font-bold leading-tight mb-6 mx-auto w-full content-center items-center ">
            <img src="/images/logo-white.svg" class="ml-3 w-auto lg:h-20 h-15 inline" />
          </div>
        </div>
      </div>
      <div class="md:flex md:items-center md:justify-left w-full sm:w-auto md:h-full xl:w-1/2 p-8 md:p-10 lg:p-14 sm:rounded-lg md:rounded-none ">
        <div class="max-w-xl w-full space-y-4">
          <div class="lg:text-left text-center">
            <div class="mt-6 font-bold text-gray-100 flex items-center gap-x-3">
              <img src="/images/logo.svg" class="h-10 w-auto inline" />
              <span class="text-2xl font-thin text-white">x</span>
              <img src="/images/lms-platforms.png" class="h-12 w-auto inline" />
            </div>
            <h2 class="mt-6 text-4xl md:text-6xl font-bold text-gray-100">
              <%= gettext("Bring Claper to your LMS") %>
            </h2>
            <p class="mt-10 text-2xl md:text-4xl text-gray-200">
              <%= gettext("Register your platform") %>
            </p>
          </div>
          <div class="flex flex-row justify-center items-center space-x-3"></div>

          <form action={~p"/lti/register"} method="post">
            <input type="hidden" name="openid_configuration" value={@conf} />
            <input type="hidden" name="registration_token" value={@token} />
            <button
              :if={@current_user}
              type="submit"
              class="flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
            >
              <%= gettext("Add Claper") %>
            </button>
            <p :if={!@current_user} class="text-white italic">
              <%= gettext("You must login to continue") %>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
