sure/app/views/settings/providers/_mercury_panel.html.erb

<div id="mercury-providers-panel" class="space-y-4">
  <% active_items = local_assigns[:mercury_items] || @mercury_items || Current.family.mercury_items.active.ordered %>
  <% credentialed_items = active_items.select(&:credentials_configured?) %>

  <%= render "settings/providers/setup_steps",
             steps: [
               t("mercury_items.provider_panel.instructions.sign_in_html", link: link_to("Mercury", "https://mercury.com", target: "_blank", rel: "noopener noreferrer", class: "text-primary font-medium underline")).html_safe,
               t("mercury_items.provider_panel.instructions.open_tokens"),
               t("mercury_items.provider_panel.instructions.create_token"),
               t("mercury_items.provider_panel.instructions.whitelist_ip_html").html_safe,
               t("mercury_items.provider_panel.instructions.copy_token_html").html_safe
             ] %>

  <% error_msg = local_assigns[:error_message] || @error_message %>
  <% if error_msg.present? %>
    <%= render DS::Alert.new(message: error_msg, variant: :error) %>
  <% end %>

  <% if active_items.any? %>
    <div class="space-y-3">
      <% active_items.each do |item| %>
        <%= render DS::Disclosure.new(variant: :card) do |disclosure| %>
          <% disclosure.with_summary_content do %>
            <div class="flex items-center justify-between gap-2 w-full">
              <div class="flex items-center gap-3">
                <div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full">
                  <p class="text-blue-600 text-xs font-medium"><%= item.name.to_s.first.to_s.upcase %></p>
                </div>
                <div>
                  <p class="font-medium text-primary"><%= item.name %></p>
                  <p class="text-xs text-secondary"><%= item.sync_status_summary %></p>
                </div>
              </div>
            </div>
          <% end %>

          <div class="mt-4 space-y-4">
            <div class="flex items-center gap-2">
              <%= button_to sync_mercury_item_path(item),
                            method: :post,
                            class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-secondary hover:text-primary border border-secondary rounded-lg hover:border-primary",
                            disabled: item.syncing? do %>
                <%= icon "refresh-cw", size: "sm" %>
                <%= t("mercury_items.provider_panel.sync") %>
              <% end %>
              <%= button_to mercury_item_path(item),
                            method: :delete,
                            class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-lg",
                            data: { turbo_confirm: t("mercury_items.provider_panel.disconnect_confirm", name: item.name) } do %>
                <%= icon "trash-2", size: "sm" %>
              <% end %>
            </div>

            <%= styled_form_with model: item,
                                 url: mercury_item_path(item),
                                 scope: :mercury_item,
                                 method: :patch,
                                 data: { turbo: true },
                                 class: "space-y-3" do |form| %>
              <%= form.text_field :name,
                                  label: t("mercury_items.provider_panel.connection_name_label"),
                                  placeholder: t("mercury_items.provider_panel.connection_name_placeholder") %>

              <%= form.text_field :token,
                                  label: t("mercury_items.provider_panel.token_label"),
                                  placeholder: t("mercury_items.provider_panel.keep_token_placeholder"),
                                  type: :password,
                                  value: nil %>

              <%= form.text_field :base_url,
                                  label: t("mercury_items.provider_panel.base_url_label"),
                                  placeholder: t("mercury_items.provider_panel.base_url_placeholder"),
                                  value: item.base_url %>

              <div class="flex flex-wrap justify-end gap-2">
                <%= render DS::Link.new(
                  text: t("mercury_items.provider_panel.setup_accounts"),
                  icon: "settings",
                  variant: "secondary",
                  href: setup_accounts_mercury_item_path(item),
                  frame: :modal
                ) %>
                <%= form.submit t("mercury_items.provider_panel.update_connection") %>
              </div>
            <% end %>
          </div>
        <% end %>
      <% end %>
    </div>
  <% end %>

  <% mercury_item = Current.family.mercury_items.build(name: t("mercury_items.provider_panel.default_connection_name")) %>
  <% if active_items.any? %>
    <h3 class="flex items-center gap-2 text-sm font-medium text-primary mt-4">
      <%= icon "plus", size: "sm" %>
      <%= t("mercury_items.provider_panel.add_connection") %>
    </h3>
  <% end %>
  <%= styled_form_with model: mercury_item,
                       url: mercury_items_path,
                       scope: :mercury_item,
                       method: :post,
                       data: { turbo: true },
                       class: "space-y-3" do |form| %>
    <%= form.text_field :name,
                        label: t("mercury_items.provider_panel.connection_name_label"),
                        placeholder: t("mercury_items.provider_panel.connection_name_placeholder") %>

    <%= form.text_field :token,
                        label: t("mercury_items.provider_panel.token_label"),
                        placeholder: t("mercury_items.provider_panel.token_placeholder"),
                        type: :password,
                        value: nil %>

    <%= form.text_field :base_url,
                        label: t("mercury_items.provider_panel.base_url_label"),
                        placeholder: t("mercury_items.provider_panel.base_url_placeholder") %>
    <p class="text-xs text-secondary px-1 -mt-1"><%= t("mercury_items.provider_panel.sandbox_note_html").html_safe %></p>

    <div class="flex justify-end">
      <%= form.submit t("mercury_items.provider_panel.add_connection") %>
    </div>
  <% end %>

</div>