sure/app/views/enable_banking_items/new.html.erb

<%= turbo_frame_tag "modal" do %>
  <%= render DS::Dialog.new do |dialog| %>
    <% dialog.with_header(title: t(".link_enable_banking_title")) %>
    <% dialog.with_body do %>
        <% items = local_assigns[:enable_banking_items] || @enable_banking_items || Current.family.enable_banking_items.where.not(client_certificate: nil) %>
        <% if items&.any? %>
            <%
            # Find the first item with valid session to use for "Add Connection" button
            item_for_new_connection = items.find(&:session_valid?)
            # Check if any item needs initial connection (configured but no session yet)
            item_needing_connection = items.find { |i| !i.session_valid? && !i.session_expired? }
            %>
            <div class="border-t border-primary pt-4 space-y-3">
            <% items.each do |item| %>
                <div class="flex items-center justify-between p-3 rounded-lg bg-container border border-primary">
                <div class="flex items-center gap-3">
                    <% if item.session_valid? %>
                    <div class="w-2 h-2 bg-success rounded-full"></div>
                    <div>
                        <p class="text-sm font-medium text-primary"><%= item.aspsp_name || "Connected Bank" %></p>
                        <p class="text-xs text-secondary">
                        Session expires: <%= item.session_expires_at&.strftime("%b %d, %Y") || "Unknown" %>
                        </p>
                    </div>
                    <% elsif item.session_expired? %>
                    <div class="w-2 h-2 bg-warning rounded-full"></div>
                    <div>
                        <p class="text-sm font-medium text-primary"><%= item.aspsp_name || "Connection" %></p>
                        <p class="text-xs text-destructive">Session expired - re-authorization required</p>
                    </div>
                    <% else %>
                    <div class="w-2 h-2 bg-secondary rounded-full"></div>
                    <div>
                        <p class="text-sm font-medium text-primary">Configured</p>
                        <p class="text-xs text-secondary">Ready to connect a bank</p>
                    </div>
                    <% end %>
                </div>

                <div class="flex items-center gap-2">
                    <% if item.session_valid? %>
                    <%= button_to sync_enable_banking_item_path(item),
                                    method: :post,
                                    class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-primary bg-container border border-primary hover:bg-gray-50 transition-colors",
                                    data: { turbo: false } do %>
                        Sync
                    <% end %>
                    <% elsif item.session_expired? %>
                    <%= button_to reauthorize_enable_banking_item_path(item),
                                    method: :post,
                                    class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-white bg-warning hover:opacity-90 transition-colors",
                                    data: { turbo: false } do %>
                        Reconnect
                    <% end %>
                    <% else %>
                    <%= link_to select_bank_enable_banking_item_path(item),
                                class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
                                data: { turbo_frame: "modal" } do %>
                        Connect Bank
                    <% end %>
                    <% end %>

                    <%= button_to enable_banking_item_path(item),
                                method: :delete,
                                class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/10 transition-colors",
                                data: { turbo_confirm: "Are you sure you want to remove this connection?" } do %>
                    Remove
                    <% end %>
                </div>
                </div>
            <% end %>

            <%# Add Connection button below the list - only show if we have a valid session to copy credentials from %>
            <% if item_for_new_connection %>
                <div class="flex justify-center pt-2">
                <%= button_to new_connection_enable_banking_item_path(item_for_new_connection),
                                method: :post,
                                class: "inline-flex items-center gap-2 justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
                                data: { turbo_frame: "modal" } do %>
                    <%= icon "plus", size: "sm" %>
                    Add Connection
                <% end %>
                </div>
            <% end %>
            </div>
        <% else %>
            <div class="space-y-4">
                <div class="flex items-start gap-3">
                <%= icon("alert-circle", class: "text-warning w-5 h-5 shrink-0 mt-0.5") %>
                <div class="text-sm text-secondary">
                    <p class="font-medium text-primary mb-2">Enable Banking connection not configured</p>
                    <p>Before you can link Enable Banking accounts, you need to configure your Enable Banking connection.</p>
                </div>
                </div>

                <div class="bg-surface rounded-lg p-4 space-y-2 text-sm">
                <p class="font-medium text-primary">Setup Steps:</p>
                <ol class="list-decimal list-inside space-y-1 text-secondary">
                    <li>Go to <strong>Settings → Bank Sync Providers</strong></li>
                    <li>Find the <strong>Enable Banking</strong> section</li>
                    <li>Enter your Enable Banking credentials</li>
                    <li>Return here to link your accounts</li>
                </ol>
                </div>

                <div class="mt-4">
                <%= link_to settings_providers_path,
                            class: "w-full inline-flex items-center justify-center rounded-lg font-medium whitespace-nowrap rounded-lg hidden md:inline-flex px-3 py-2 text-sm text-inverse bg-inverse hover:bg-inverse-hover disabled:bg-gray-500 theme-dark:disabled:bg-gray-400",
                            data: { turbo: false } do %>
                    Go to Provider Settings
                <% end %>
                </div>
            </div>
        <% end %>
    <% end %>
  <% end %>
<% end %>