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

<div id="up-providers-panel" class="space-y-4">
  <% active_items = local_assigns[:up_items] || @up_items || Current.family.up_items.active.ordered %>

  <%= render "settings/providers/setup_steps",
             steps: [
               t("settings.providers.up_panel.step_1_html", link: link_to(t("providers.up.name"), "https://api.up.com.au", target: "_blank", rel: "noopener noreferrer", class: "text-primary font-medium underline")),
               t("settings.providers.up_panel.step_2"),
               t("settings.providers.up_panel.step_3")
             ] %>

  <% 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-surface rounded-full">
                  <p class="text-primary 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">
              <%= render DS::Button.new(
                text: t("up_items.provider_panel.sync"),
                icon: "refresh-cw",
                variant: :outline,
                size: :sm,
                href: sync_up_item_path(item),
                method: :post,
                disabled: item.syncing?
              ) %>
              <%= render DS::Button.new(
                text: t("up_items.provider_panel.disconnect"),
                icon: "trash-2",
                variant: :outline_destructive,
                size: :sm,
                href: up_item_path(item),
                method: :delete,
                data: { turbo_confirm: t("up_items.provider_panel.disconnect_confirm", name: item.name) }
              ) %>
            </div>

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

              <%= form.text_field :access_token,
                                  label: t("up_items.provider_panel.access_token_label"),
                                  placeholder: t("up_items.provider_panel.keep_access_token_placeholder"),
                                  type: :password,
                                  value: nil %>

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

  <% up_item = Current.family.up_items.build(name: t("up_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("up_items.provider_panel.add_connection") %>
    </h3>
  <% end %>

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

    <%= form.text_field :access_token,
                        label: t("up_items.provider_panel.access_token_label"),
                        placeholder: t("up_items.provider_panel.access_token_placeholder"),
                        type: :password,
                        value: nil %>

    <div class="flex justify-end">
      <%= render DS::Button.new(
        text: t("up_items.provider_panel.add_connection"),
        type: "submit"
      ) %>
    </div>
  <% end %>
</div>