<div class="mx-auto mt-6 text-center dark:text-gray-300">
  <h1 class="text-3xl font-black">Register your 30-day unlimited-use free trial</h1>
  <div class="text-xl font-medium">Set up privacy-friendly analytics with just a few clicks</div>
</div>

<div class="w-full max-w-3xl mt-4 mx-auto flex flex-shrink-0">
  <%= form_for @changeset, "/register", [class: "w-full max-w-md mx-auto bg-white dark:bg-gray-800 shadow-md rounded px-8 py-6 mb-4 mt-8", id: "register-form"], fn f -> %>
    <h2 class="text-xl font-black dark:text-gray-100">Enter your details</h2>
    <div class="my-4">
      <%= label f, :name, "Full name", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
      <div class="mt-1">
        <%= text_input f, :name, class: "dark:bg-gray-900 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:text-gray-300", placeholder: "Jane Doe" %>
      </div>
      <%= error_tag f, :name %>
    </div>
    <div class="my-4">
      <div class="flex justify-between">
      <%= label f, :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
      <p class="text-xs text-gray-500 mt-1">No spam, guaranteed.</p>
      </div>
      <div class="mt-1">
        <%= email_input f, :email, class: "dark:bg-gray-900 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:text-gray-300", placeholder: "example@email.com" %>
      </div>
      <%= error_tag f, :email %>
    </div>

    <div class="my-4">
      <div class="flex justify-between">
      <%= label f, :password, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
      <p class="text-xs text-gray-500 mt-1">Min 6 characters</p>
      </div>
      <div class="mt-1">
        <%= password_input f, :password, class: "dark:bg-gray-900 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:text-gray-300" %>
      </div>
      <%= error_tag f, :password %>
    </div>

    <div class="my-4">
      <%= label f, :password_confirmation, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
      <div class="mt-1">
        <%= password_input f, :password_confirmation, class: "dark:bg-gray-900 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:text-gray-300" %>
      </div>
      <%= error_tag f, :password_confirmation %>
    </div>

    <%= if PlausibleWeb.Captcha.enabled?() do %>
      <div class="mt-4">
        <div class="h-captcha" data-sitekey="<%= PlausibleWeb.Captcha.sitekey() %>"></div>
        <%= if assigns[:captcha_error] do %>
          <div class="text-red-500 text-xs italic mt-3"><%= @captcha_error %></div>
        <% end %>
        <script src="https://hcaptcha.com/1/api.js" async defer></script>
      </div>
    <% end %>

    <%= submit "Start my free trial →", class: "button mt-4 w-full" %>

    <p class="text-center text-gray-600 dark:text-gray-500  text-xs mt-4">
      Already have an account? <%= link("Log in", to: "/login", class: "underline text-gray-800 dark:text-gray-50") %> instead.
    </p>
  <% end %>
  <div class="pt-12 pl-8 hidden md:block">
    <%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 0) %>
  </div>
</div>
