sure/app/views/simplefin_items/setup_accounts.html.erb

<% content_for :title, "Set Up SimpleFin Accounts" %>

<%= render DS::Dialog.new do |dialog| %>
  <% dialog.with_header(title: "Set Up Your SimpleFin Accounts") do %>
    <div class="flex items-center gap-2">
      <%= icon "building-2", class: "text-primary" %>
      <span>Choose the correct account types for your imported accounts</span>
    </div>
  <% end %>

  <% dialog.with_body do %>
    <%= form_with url: complete_account_setup_simplefin_item_path(@simplefin_item),
                  method: :post,
                  local: true,
                  data: { turbo: false },
                  class: "space-y-6" do |form| %>

      <div class="space-y-4">
        <div class="bg-surface border border-primary p-4 rounded-lg">
          <div class="flex items-start gap-3">
            <%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
            <div>
              <p class="text-sm text-primary mb-2">
                <strong>Choose the correct account type for each SimpleFin account:</strong>
              </p>
              <ul class="text-xs text-secondary space-y-1 list-disc list-inside">
                <li><strong>Checking or Savings</strong> - Regular bank accounts</li>
                <li><strong>Credit Card</strong> - Credit card accounts</li>
                <li><strong>Investment</strong> - Brokerage, 401(k), IRA accounts</li>
                <li><strong>Loan or Mortgage</strong> - Debt accounts</li>
                <li><strong>Other Asset</strong> - Everything else</li>
              </ul>
            </div>
          </div>
        </div>

        <% @simplefin_accounts.each do |simplefin_account| %>
          <div class="border border-primary rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
              <div>
                <h3 class="font-medium text-primary"><%= simplefin_account.name %></h3>
                <p class="text-sm text-secondary">
                  Balance: <%= number_to_currency(simplefin_account.current_balance || 0, unit: simplefin_account.currency) %>
                </p>
              </div>
            </div>

            <div class="space-y-3" data-controller="account-type-selector" data-account-type-selector-account-id-value="<%= simplefin_account.id %>">
              <div>
                <%= label_tag "account_types[#{simplefin_account.id}]", "Account Type:",
                             class: "block text-sm font-medium text-primary mb-2" %>
                <%= select_tag "account_types[#{simplefin_account.id}]",
                              options_for_select(@account_type_options),
                              { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600",
                                data: {
                                  action: "change->account-type-selector#updateSubtype"
                                } } %>
              </div>

              <!-- Subtype dropdowns (shown/hidden based on account type) -->
              <div data-account-type-selector-target="subtypeContainer">
                <div class="subtype-select" data-type="Depository" style="display: none;">
                  <%= label_tag "account_subtypes[#{simplefin_account.id}]", "Account Subtype:",
                               class: "block text-sm font-medium text-primary mb-2" %>
                  <%= select_tag "account_subtypes[#{simplefin_account.id}]",
                                options_for_select([["Select subtype", ""]] + @depository_subtypes,
                                  simplefin_account.name.downcase.include?("checking") ? "checking" :
                                  simplefin_account.name.downcase.include?("savings") ? "savings" : ""),
                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                </div>

                <div class="subtype-select" data-type="CreditCard" style="display: none;">
                  <%= label_tag "account_subtypes[#{simplefin_account.id}]", "Credit Card Type:",
                               class: "block text-sm font-medium text-primary mb-2" %>
                  <%= select_tag "account_subtypes[#{simplefin_account.id}]",
                                options_for_select([["Select type", ""]] + @credit_card_subtypes),
                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                </div>

                <div class="subtype-select" data-type="Investment" style="display: none;">
                  <%= label_tag "account_subtypes[#{simplefin_account.id}]", "Investment Type:",
                               class: "block text-sm font-medium text-primary mb-2" %>
                  <%= select_tag "account_subtypes[#{simplefin_account.id}]",
                                options_for_select([["Select type", ""]] + @investment_subtypes),
                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                </div>

                <div class="subtype-select" data-type="Loan" style="display: none;">
                  <%= label_tag "account_subtypes[#{simplefin_account.id}]", "Loan Type:",
                               class: "block text-sm font-medium text-primary mb-2" %>
                  <%= select_tag "account_subtypes[#{simplefin_account.id}]",
                                options_for_select([["Select type", ""]] + @loan_subtypes),
                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                </div>

                <!-- OtherAsset doesn't need subtype selection -->
                <div class="subtype-select" data-type="OtherAsset" style="display: none;">
                  <p class="text-sm text-secondary">No additional options needed for Other Assets.</p>
                </div>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <div class="flex gap-3">
        <%= form.submit "Create Accounts",
            class: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" %>
        <%= link_to "Cancel",
            simplefin_items_path,
            class: "px-4 py-2 text-secondary hover:text-primary" %>
      </div>
    <% end %>
  <% end %>
<% end %>