<% @page_title = "Complete your sign-up" %>

<div class="panel panel--centered flex flex-column gap-half <%= "shake" if flash[:alert] %>">
  <h1 class="txt-x-large font-weight-black margin-block-end"><%= @page_title %></h1>

  <%= form_with model: @signup, url: signup_completion_path, scope: "signup", class: "flex flex-column gap", data: { controller: "form" } do |form| %>
    <%= form.text_field :full_name, class: "input txt-large", autocomplete: "name", placeholder: "Enter your full name…", autofocus: true, required: true, maxlength: 240 %>

    <p>You're one step away. Just enter your name to get your own Fizzy account.</p>

    <% if @signup.errors.any? %>
      <div class="margin-block-half txt-negative txt-small" style="text-align: left;">
        <p class="margin-block-none font-weight-bold">Your changes couldn't be saved:</p>
        <ul class="margin-block-none">
          <% @signup.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>

    <button type="submit" class="btn btn--link center" data-form-target="submit">
      <span>Continue</span>
      <%= icon_tag "arrow-right" %>
    </button>
  <% end %>

  <p>
    <%= link_to new_account_import_path, class: "btn btn--plain txt-link center txt-small", data: { turbo_prefetch: false } do %>
      <span>Or import a Fizzy account</span>
    <% end %>
  </p>
</div>

<% content_for :footer do %>
  <%= render "sessions/footer" %>
<% end %>
