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

<% content_for :title, t(".title") %>

<%= render DS::Dialog.new do |dialog| %>
  <% dialog.with_header(title: t(".title")) do %>
    <div class="flex items-center gap-2">
      <%= icon "landmark", class: "text-primary" %>
      <span class="text-primary"><%= t(".subtitle") %></span>
    </div>
  <% end %>

  <% dialog.with_body do %>
    <%= form_with url: complete_account_setup_up_item_path(@up_item),
                  method: :post,
                  local: true,
                  data: { turbo_frame: "_top" },
                  class: "space-y-6" do %>
      <div class="space-y-4">
        <% if @api_error.present? %>
          <div class="p-8 flex flex-col gap-3 items-center justify-center text-center">
            <%= icon "alert-circle", size: "lg", class: "text-destructive" %>
            <p class="text-primary font-medium"><%= t(".fetch_failed") %></p>
            <p class="text-destructive text-sm"><%= @api_error %></p>
          </div>
        <% elsif @up_accounts.empty? %>
          <div class="p-8 flex flex-col gap-3 items-center justify-center text-center">
            <%= icon "check-circle", size: "lg", class: "text-success" %>
            <p class="text-primary font-medium"><%= t(".no_accounts_to_setup") %></p>
            <p class="text-secondary text-sm"><%= t(".all_accounts_linked") %></p>
          </div>
        <% else %>
          <div class="bg-surface border border-primary p-4 rounded-lg">
            <p class="text-sm text-primary"><strong><%= t(".choose_account_type") %></strong></p>
            <p class="text-xs text-secondary mt-1"><%= t(".choose_account_type_description") %></p>
          </div>

          <% @up_accounts.each do |up_account| %>
            <div class="border border-primary rounded-lg p-4">
              <div class="mb-3">
                <h3 class="font-medium text-primary"><%= up_account.name %></h3>
                <p class="text-xs text-secondary">
                  <%= [up_account.currency, up_account.account_type].compact.join(" · ") %>
                </p>
              </div>

              <%= label_tag "account_types[#{up_account.id}]", t(".account_type_label"),
                            class: "block text-sm font-medium text-primary mb-2" %>
              <%= select_tag "account_types[#{up_account.id}]",
                             options_for_select(@account_type_options, @up_account_type_suggestions.fetch(up_account.id, "skip")),
                             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" %>
            </div>
          <% end %>
        <% end %>
      </div>

      <div class="flex gap-3">
        <%= render DS::Button.new(
          text: t(".create_accounts"),
          variant: "primary",
          icon: "plus",
          type: "submit",
          class: "flex-1",
          disabled: @api_error.present? || @up_accounts.empty?
        ) %>
        <%= render DS::Link.new(
          text: t(".cancel"),
          variant: "secondary",
          href: accounts_path
        ) %>
      </div>
    <% end %>
  <% end %>
<% end %>