sure/app/views/binance_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 "coins", class: "text-primary" %>
      <span class="text-primary"><%= t(".subtitle") %></span>
    </div>
  <% end %>

  <% dialog.with_body do %>
    <%= form_with url: complete_account_setup_binance_item_path(@binance_item),
                  method: :post,
                  local: true,
                  id: "binance-setup-form",
                  data: {
                    controller: "loading-button",
                    action: "submit->loading-button#showLoading",
                    loading_button_loading_text_value: t(".creating"),
                    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">
                <%= t(".instructions") %>
              </p>
            </div>
          </div>
        </div>

        <div class="bg-surface border border-primary p-4 rounded-lg space-y-3">
          <p class="text-sm font-medium text-primary"><%= t(".historical_import") %></p>
          <div class="field">
            <%= form.label :sync_start_date, t("settings.providers.binance_panel.sync_start_date_label"), class: "label" %>
            <%= form.date_field :sync_start_date,
                                value: @binance_item.sync_start_date || (Date.current - 1.year),
                                max: Date.current,
                                class: "input" %>
            <p class="help-text mt-1 text-xs text-secondary"><%= t("settings.providers.binance_panel.sync_start_date_help") %></p>
          </div>
        </div>

        <% if @binance_accounts.empty? %>
          <div class="text-center py-8">
            <p class="text-secondary"><%= t(".no_accounts") %></p>
          </div>
        <% else %>
          <div data-controller="select-all">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-secondary">
                <%= t(".accounts_count", count: @binance_accounts.count) %>
              </span>
              <label class="flex items-center gap-2 text-sm cursor-pointer">
                <input type="checkbox"
                       id="binance-select-all"
                       data-action="change->select-all#toggle"
                       class="checkbox checkbox--dark">
                <span class="text-secondary"><%= t(".select_all") %></span>
              </label>
            </div>

            <div class="space-y-2 max-h-96 overflow-y-auto">
              <% @binance_accounts.each do |binance_account| %>
                <label for="ba_<%= binance_account.id %>" class="flex items-center gap-3 p-3 border border-primary rounded-lg hover:bg-surface transition-colors cursor-pointer">
                  <%= check_box_tag "selected_accounts[]",
                                    binance_account.id,
                                    false,
                                    id: "ba_#{binance_account.id}",
                                    class: "checkbox checkbox--dark",
                                    data: { select_all_target: "checkbox" } %>
                  <div class="flex-1 min-w-0">
                    <p class="font-medium text-primary truncate">
                      <%= binance_account.name %>
                    </p>
                    <p class="text-xs text-secondary">
                      <%= binance_account.currency %>
                    </p>
                  </div>
                  <div class="text-right shrink-0">
                    <p class="text-sm font-medium text-primary">
                      <%= number_with_delimiter(binance_account.current_balance || 0, delimiter: ",") %>
                    </p>
                    <p class="text-xs text-secondary">
                      <%= binance_account.currency %>
                    </p>
                  </div>
                </label>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>

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