<%= render HeaderCompactComponent.new(title: "Signup") %>

<%= render MainCompactComponent.new do %>
  <% case @step
     when 1 %>
    <h2>Choose a username</h2>
    <%= form_for @user, :url => signup_validate_url do |f| %>
      <div class="mb-6">
        <p class="flex gap-2 items-center">
          <%= f.text_field :cn, autofocus: true, autocomplete: "username",
                                required: true, class: "relative grow text-xl"%>
          <span class="relative shrink-0 text-gray-500 md:text-xl">
            @ <%= Setting.primary_domain %>
          </span>
        </p>
      </div>
      <% if @validation_error.present? %>
        <p class="error-msg">Username <%= @validation_error %></p>
      <% end %>
      <p class="mt-12">
        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
      </p>
    <% end %>

  <% when 2 %>
    <h2>What's your email?</h2>
    <%= form_for @user, :url => signup_validate_url do |f| %>
      <p>
        <%= f.label :email, 'Email address', class: 'hidden' %>
        <%= f.email_field :email, autofocus: true, autocomplete: 'email',
                                  required: true, class: 'text-xl w-full' %>
      </p>
      <% if @validation_error.present? %>
        <p class="error-msg">Email <%= @validation_error %></p>
      <% end %>
      <p class="mt-12">
        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
      </p>
    <% end %>

  <% when 3 %>
    <h2>Choose a password</h2>

    <%= form_for @user, :url => signup_validate_url do |f| %>
      <p>
        <%= f.label :password, 'Password', class: 'hidden' %>
        <%= f.password_field :password, autofocus: true, class: 'text-xl w-full' %>
      </p>
      <% if @validation_error.present? %>
        <p class="error-msg">Password <%= @validation_error %></p>
      <% end %>
      <p class="mt-8 text-sm text-gray-500">
        By clicking the button below, you accept our future Terms of Service
        and Privacy Policy. Don't worry, they will be excellent!
      </p>
      <p class="mt-8">
        <%= f.submit "Create account", class: "btn-md btn-blue block w-full" %>
      </p>
    <% end %>
  <% end %>
<% end %>
