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

<%= form_for @changeset, Routes.auth_path(@conn, :register_from_invitation_form, @invitation.invitation_id), [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"], fn f -> %>
  <h2 class="text-xl font-black dark:text-gray-100">Enter your details</h2>
  <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: "bg-gray-100 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", value: @invitation.email, readonly: "readonly" %>
    </div>
    <%= error_tag f, :email %>
  </div>

  <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, :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 "Create my account →", 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 %>
