<% if savings_goal.errors.any? %> <%= render "shared/form_errors", model: savings_goal %> <% end %> <%# Connected stepper %>

1 <%= t("savings_goals.form_stepper.step1.label") %>

2 <%= t("savings_goals.form_stepper.step2.label") %>

<%= styled_form_with model: savings_goal, url: savings_goals_path, class: "space-y-4" do |f| %>

<%= t("savings_goals.form_stepper.step1.heading") %>

<%= t("savings_goals.form_stepper.step1.subheading") %>

<%= t("savings_goals.form_stepper.step1.fields.name") %>

<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %> <%= f.text_field :name, placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"), required: true, autofocus: true, label: "", class: "flex-1" %>

<%= f.money_field :target_amount, label: t("savings_goals.form_stepper.step1.fields.target_amount"), required: true %> <%= f.date_field :target_date, label: t("savings_goals.form_stepper.step1.fields.target_date") %>

<%= t("savings_goals.form_stepper.step1.fields.funding_accounts") %>

<% grouped = linkable_accounts.group_by { |a| a.subtype.to_s.presence || "other" } %> <% grouped.each_with_index do |(subtype, accts), group_idx| %>

<%= t("savings_goals.form_stepper.step1.subtypes.#{subtype}", default: subtype.titleize) %>

"> <% accts.each_with_index do |account, idx| %> 0 %>"> <%= check_box_tag "savings_goal[account_ids][]", account.id, false, class: "shrink-0", data: { savings_goal_stepper_target: "linkedAccountCheckbox", action: "change->savings-goal-stepper#linkedAccountChanged", account_name: account.name, account_subtype: account.subtype || subtype, account_balance: account.balance } %> <%= render Savings::GoalAvatarComponent.new(name: account.name, color: "var(--color-blue-500)", size: "md") %>

<%= account.name %>

<%= (account.subtype || subtype).titleize %>

<%= Money.new(account.balance, account.currency).format %> <% end %>

<% end %>

<%= f.text_area :notes, label: t("savings_goals.form_stepper.step1.fields.notes"), rows: 2 %> <%# Hidden color (random) %> <%= f.hidden_field :color, value: savings_goal.color || SavingsGoal::COLORS.sample %>

<%= t("savings_goals.form_stepper.step2.heading") %>

<%= t("savings_goals.form_stepper.step2.subheading") %>

<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>

—

<%= t("savings_goals.form_stepper.step2.funding_accounts") %> —

<%= t("savings_goals.form_stepper.step2.suggested_monthly") %> —

<%= render DS::FilledIcon.new(variant: :container, icon: "zap", size: "md", rounded: false) %>

<%= t("savings_goals.form_stepper.step2.add_initial_contribution") %>

<%= t("savings_goals.form_stepper.step2.add_initial_contribution_sub") %>

<%= icon("chevron-down", size: "sm") %>

<%= label_tag "savings_goal[initial_contribution_amount]", t("savings_goals.form_stepper.step2.initial_amount"), class: "block text-sm text-secondary mb-1" %> <%= number_field_tag "savings_goal[initial_contribution_amount]", nil, step: "0.01", min: "0", autocomplete: "off", class: "w-full", data: { savings_goal_stepper_target: "initialContributionAmount" } %>

<%= label_tag "savings_goal[initial_contribution_account_id]", t("savings_goals.form_stepper.step2.initial_account"), class: "block text-sm text-secondary mb-1" %> <%= select_tag "savings_goal[initial_contribution_account_id]", options_for_select([]), include_blank: t("savings_goals.form_stepper.step2.select_account"), data: { savings_goal_stepper_target: "initialContributionAccountSelect" }, class: "w-full" %>

<%= render DS::Button.new( text: t("savings_goals.form_stepper.continue"), variant: "primary", icon: "arrow-right", icon_position: :right, data: { savings_goal_stepper_target: "footerRightButton", action: "click->savings-goal-stepper#footerRight" } ) %>

<% end %>