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

<%# locals: (enable_banking_item:) %>

<%= tag.div id: dom_id(enable_banking_item) do %>
  <%= render DS::Disclosure.new(variant: :card, open: true) do |disclosure| %>
    <% disclosure.with_summary_content do %>
      <div class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
        <div class="flex items-center gap-2">
          <%= icon "chevron-right", class: "group-open:rotate-90 motion-safe:transition-transform motion-safe:duration-150" %>

          <div class="flex items-center justify-center h-8 w-8 bg-success/10 rounded-full">
            <% if enable_banking_item.logo.attached? %>
              <%= image_tag enable_banking_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
            <% else %>
              <div class="flex items-center justify-center">
                <%= tag.p enable_banking_item.institution_display_name.first.upcase, class: "text-success text-xs font-medium" %>
              </div>
            <% end %>
          </div>

          <div class="pl-1 text-sm">
            <div class="flex items-center gap-2">
              <%= tag.p enable_banking_item.institution_display_name, class: "font-medium text-primary" %>
              <% if enable_banking_item.scheduled_for_deletion? %>
                <p class="text-destructive text-sm animate-pulse"><%= t(".deletion_in_progress") %></p>
              <% end %>
            </div>
            <p class="text-xs text-secondary"><%= t(".provider_name") %></p>
            <% if enable_banking_item.syncing? %>
              <div class="text-secondary flex items-center gap-1">
                <%= icon "loader", size: "sm", class: "animate-spin" %>
                <%= tag.span t(".syncing") %>
              </div>
            <% elsif enable_banking_item.requires_update? %>
              <div class="text-warning flex items-center gap-1">
                <%= icon "alert-triangle", size: "sm", color: "warning" %>
                <%= tag.span t(".reconnect") %>
              </div>
            <% else %>
              <p class="text-secondary">
                <% if enable_banking_item.last_synced_at %>
                  <%= t(".last_synced", time: time_ago_in_words(enable_banking_item.last_synced_at)) %>
                  <% if enable_banking_item.sync_status_summary %>
                    · <%= enable_banking_item.sync_status_summary %>
                  <% end %>
                <% else %>
                  <%= t(".never_synced") %>
                <% end %>
              </p>
            <% end %>
          </div>
        </div>

        <% if Current.user&.admin? %>
          <div class="flex items-center gap-2">
            <% if enable_banking_item.requires_update? %>
              <%= button_to reauthorize_enable_banking_item_path(enable_banking_item),
                            method: :post,
                            class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg text-inverse bg-warning hover:opacity-90 transition-colors",
                            data: { turbo: false } do %>
                <%= icon "refresh-cw", size: "sm" %>
                <%= t(".update") %>
              <% end %>
            <% elsif Rails.env.development? %>
              <%= icon(
                "refresh-cw",
                as_button: true,
                href: sync_enable_banking_item_path(enable_banking_item)
              ) %>
            <% end %>

            <%= render DS::Menu.new do |menu| %>
              <% menu.with_item(
                variant: "button",
                text: t(".delete"),
                icon: "trash-2",
                href: enable_banking_item_path(enable_banking_item),
                method: :delete,
                confirm: CustomConfirm.for_resource_deletion(enable_banking_item.institution_display_name, high_severity: true)
              ) %>
            <% end %>
          </div>
        <% end %>
      </div>
    <% end %>

    <% unless enable_banking_item.scheduled_for_deletion? %>
      <div class="space-y-4 mt-4">
        <% if enable_banking_item.accounts.any? %>
          <%= render "accounts/index/account_groups", accounts: enable_banking_item.accounts %>
        <% end %>

        <%# Sync summary (collapsible) - using shared ProviderSyncSummary component %>
        <% if defined?(@enable_banking_sync_stats_map) && @enable_banking_sync_stats_map %>
          <% stats = @enable_banking_sync_stats_map[enable_banking_item.id] || {} %>
          <% latest_sync_error = defined?(@enable_banking_latest_sync_error_map) && @enable_banking_latest_sync_error_map ? @enable_banking_latest_sync_error_map[enable_banking_item.id] : nil %>
        <% else %>
          <% latest_sync = enable_banking_item.syncs.ordered.first %>
          <% stats = latest_sync&.sync_stats || {} %>
          <% latest_sync_error = latest_sync&.error %>
        <% end %>
        <% if latest_sync_error.present? && stats.is_a?(Hash) %>
          <% stats = stats.merge(
            "total_errors" => 1,
            "errors" => [{ "message" => latest_sync_error }]
          ) %>
        <% end %>
        <%= render ProviderSyncSummary.new(
          stats: stats,
          provider_item: enable_banking_item
        ) %>

        <% if enable_banking_item.unlinked_accounts_count > 0 %>
          <div class="p-4 flex flex-col gap-3 items-center justify-center">
            <p class="text-primary font-medium text-sm"><%= t(".setup_needed") %></p>
            <p class="text-secondary text-sm"><%= t(".setup_needed_description", count: enable_banking_item.unlinked_accounts_count) %></p>
            <%= render DS::Link.new(
              text: t(".set_up_accounts"),
              icon: "settings",
              variant: "primary",
              href: setup_accounts_enable_banking_item_path(enable_banking_item),
              frame: :modal
            ) %>
          </div>
        <% elsif enable_banking_item.accounts.empty? && enable_banking_item.enable_banking_accounts.empty? %>
          <div class="p-4 flex flex-col gap-3 items-center justify-center">
            <p class="text-primary font-medium text-sm"><%= t(".no_accounts_found") %></p>
            <p class="text-secondary text-sm"><%= t(".no_accounts_found_description") %></p>
          </div>
        <% end %>
      </div>
    <% end %>
  <% end %>
<% end %>