<%= content_for :prev_nav do %>
  <%= image_tag "logomark-color.svg", class: "w-10 h-10" %>
<% end %>

<%= content_for :header_nav do %>
  <%= render "onboardings/onboarding_nav", user: @user %>
<% end %>

<%= content_for :cancel_action do %>
  <%= render "onboardings/logout" %>
<% end %>

<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-2 px-4 md:px-0">
  <div>
    <div class="space-y-1 mb-6 text-center">
      <h1 class="text-2xl font-medium md:text-2xl"><%= t(".title") %></h1>
      <p class="text-secondary text-sm"><%= t(".subtitle") %></p>
    </div>

      <%= styled_form_with model: @user do |form| %>
      <%= form.hidden_field :redirect_to, value: @invitation ? "home" : "onboarding_preferences" %>
      <%= form.hidden_field :onboarded_at, value: Time.current if @invitation %>

      <div class="mb-6">
        <%= render "settings/user_avatar_field", form: form, user: @user %>
      </div>

      <div class="flex flex-col md:flex-row md:justify-between md:items-center md:gap-4 space-y-4 md:space-y-0 mb-4">
        <%= form.text_field :first_name, placeholder: t(".first_name_placeholder"), label: t(".first_name"), container_class: "bg-container md:w-1/2 w-full", required: true %>
        <%= form.text_field :last_name, placeholder: t(".last_name_placeholder"), label: t(".last_name"), container_class: "bg-container md:w-1/2 w-full", required: true %>
      </div>

      <% unless @invitation %>
        <div class="space-y-4 mb-4">
          <%= form.fields_for :family do |family_form| %>
            <div class="bg-container rounded-lg shadow-border-xs p-4">
              <div class="space-y-2"
                data-controller="onboarding"
                data-onboarding-household-name-label-value="<%= t(".household_name") %>"
                data-onboarding-household-name-placeholder-value="<%= t(".household_name_placeholder") %>"
                data-onboarding-group-name-label-value="<%= t(".group_name") %>"
                data-onboarding-group-name-placeholder-value="<%= t(".group_name_placeholder") %>">
                <p class="text-sm font-medium text-primary"><%= t(".moniker_prompt", product_name: product_name) %></p>

                <label class="flex items-center gap-2 text-sm text-primary">
                  <%= family_form.radio_button :moniker, "Family", required: true, data: {
                    action: "onboarding#updateNameFieldForCurrentMoniker",
                    onboarding_target: "monikerRadio",
                    onboarding_moniker: "Family"
                  } %>
                  <span><%= t(".moniker_family") %></span>
                </label>

                <label class="flex items-center gap-2 text-sm text-primary">
                  <%= family_form.radio_button :moniker, "Group", required: true, data: {
                    action: "onboarding#updateNameFieldForCurrentMoniker",
                    onboarding_target: "monikerRadio",
                    onboarding_moniker: "Group"
                  } %>
                  <span><%= t(".moniker_group") %></span>
                </label>

              <%= family_form.text_field :name, placeholder: t(".household_name_placeholder"), label: t(".household_name"), data: { onboarding_target: "nameField" } %>
              </div>
            </div>

            <%= family_form.select :country,
                                   country_options,
                                   { label: t(".country") },
                                   required: true %>
          <% end %>
        </div>
      <% end %>

      <%= form.submit t(".submit") %>
    <% end %>
  </div>
</div>

<%= render "layouts/shared/footer" %>
