<%= content_for :previous_path, preferences_onboarding_path %>

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

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

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

<div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 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("onboardings.goals.title") %></h1>
      <p class="text-secondary text-sm"><%= t("onboardings.goals.subtitle", product_name: product_name) %></p>
    </div>

    <%= form_with model: @user do |form| %>
      <%= form.hidden_field :redirect_to, value: self_hosted? ? "home" : "trial" %>
      <%= form.hidden_field :set_onboarding_goals_at, value: Time.current %>
      <%= form.hidden_field :onboarded_at, value: Time.current %>

      <div class="space-y-3">
        <% [
             { icon: "layers", label: t("onboardings.goals.unified_accounts"), value: "unified_accounts" },
             { icon: "banknote", label: t("onboardings.goals.cashflow"), value: "cashflow" },
             { icon: "pie-chart", label: t("onboardings.goals.budgeting"), value: "budgeting" },
             { icon: "users", label: t("onboardings.goals.partner"), value: "partner" },
             { icon: "area-chart", label: t("onboardings.goals.investments"), value: "investments" },
             { icon: "bot", label: t("onboardings.goals.ai_insights"), value: "ai_insights" },
             { icon: "settings-2", label: t("onboardings.goals.optimization"), value: "optimization" },
             { icon: "frown", label: t("onboardings.goals.reduce_stress"), value: "reduce_stress" }
           ].each do |goal| %>
          <label class="flex items-center gap-2.5 p-4 rounded-lg border border-tertiary cursor-pointer hover:bg-container transition-colors [&:has(input:checked)]:border-solid [&:has(input:checked)]:bg-container">
            <%= form.check_box :goals, { multiple: true, class: "sr-only" }, goal[:value], nil %>
            <%= icon goal[:icon] %>
            <span class="text-primary text-sm"><%= goal[:label] %></span>
          </label>
        <% end %>
      </div>

      <div class="mt-6">
        <%= render DS::Button.new(
          text: t("onboardings.goals.submit"),
          full_width: true
        ) %>
      </div>
    <% end %>
  </div>
</div>
