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 class="text-primary">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: {
                    controller: "loading-button",
                    action: "submit->loading-button#showLoading",
                    loading_button_loading_text_value: "Creating Accounts...",
                    turbo_frame: "_top"
                  },
                  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>

        <!-- Sync Date Range Selection -->
        <div class="bg-surface border border-primary p-4 rounded-lg">
          <div class="flex items-start gap-3">
            <%= icon "calendar", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
            <div class="flex-1">
              <p class="text-sm text-primary mb-3">
                <strong>Historical Data Range:</strong>
              </p>
              <%= form.date_field :sync_start_date,
                    label: "Start syncing transactions from:",
                    value: @simplefin_item.sync_start_date || 1.year.ago.to_date,
                    min: 3.years.ago.to_date,
                    max: Date.current,
                    class: "w-full max-w-xs",
                    help_text: "Select how far back you want to sync transaction history. Maximum 3 years of history available." %>
            </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 %>
                  <% if simplefin_account.org_data.present? && simplefin_account.org_data['name'].present? %>
                    <span class="text-secondary">• <%= simplefin_account.org_data["name"] %></span>
                  <% end %>
                </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: "appearance-none bg-container border border-primary rounded-md px-3 py-2 text-sm leading-6 text-primary focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none w-full",
                                data: {
                                  action: "change->account-type-selector#updateSubtype"
                                } } %>
              </div>

              <!-- Subtype dropdowns (shown/hidden based on account type) -->
              <div data-account-type-selector-target="subtypeContainer">
                <% @subtype_options.each do |account_type, subtype_config| %>
                  <%= render "subtype_select", account_type: account_type, subtype_config: subtype_config, simplefin_account: simplefin_account %>
                <% end %>
              </div>
            </div>
          </div>
        <% end %>
      </div>

      <div class="flex gap-3">
        <%= render DS::Button.new(
          text: "Create Accounts",
          variant: "primary",
          icon: "plus",
          type: "submit",
          class: "flex-1",
          data: { loading_button_target: "button" }
        ) %>
        <%= render DS::Link.new(
          text: "Cancel",
          variant: "secondary",
          href: accounts_path
        ) %>
      </div>
    <% end %>
  <% end %>
<% end %>