<% @page_title = "Create your account" %>

<% content_for :header do %>
  <nav>
    <%= link_to new_session_path, class: "btn flex-item-justify-end", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
      <span class="for-screen-reader">Sign in instead</span>
    <% end %>
  </nav>
<% end %>

<div class="panel shadow center">
  <h1 class="margin-none-block-start margin-block-end-double">Fizzy</h1>

  <%= form_with model: @user, url: join_path(params[:join_code]), class: "flex flex-column gap" do |form| %>
    <div class="flex align-center gap">
      <label class="flex align-center gap input input--actor">
        <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
        <%= icon_tag "person", class: "txt-large" %>
      </label>
    </div>
    <div class="flex align-center gap">
      <label class="flex align-center gap input input--actor">
        <%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true %>
        <%= icon_tag "email", class: "txt-large" %>
      </label>
    </div>
    <div class="flex align-center gap">
      <label class="flex align-center gap input input--actor">
        <%= form.password_field :password, class: "input full-width", autocomplete: "new-password", placeholder: "Password", required: true, maxlength: 72 %>
        <%= icon_tag "password", class: "txt-large" %>
      </label>
    </div>
    <button type="submit" id="log_in" class="btn btn--reversed center">
      <%= icon_tag "arrow-right" %>
      <span>Create account</span>
    </button>
  <% end %>
</div>
