sure/app/views/redbark_items/_redbark_item.html.erb

<%# locals: (redbark_item:) %>

<%= tag.div id: dom_id(redbark_item) do %>
  <%= render DS::Disclosure.new(variant: :card, open: true) do |disclosure| %>
    <% disclosure.with_summary_content do %>
      <div class="w-full flex items-center justify-between gap-2">
        <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-primary/10 rounded-full">
            <div class="flex items-center justify-center">
              <%= tag.p redbark_item.name.first.upcase, class: "text-primary text-xs font-medium" %>
            </div>
          </div>

          <div class="pl-1 text-sm">
            <div class="flex items-center gap-2">
              <%= tag.p redbark_item.name, class: "font-medium text-primary" %>
              <% if redbark_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 redbark_item.syncing? %>
              <div class="text-secondary flex items-center gap-1">
                <%= icon "loader", size: "sm", class: "animate-spin" %>
                <%= tag.span t(".syncing") %>
              </div>
            <% elsif redbark_item.requires_update? %>
              <div class="text-warning flex items-center gap-1">
                <%= icon "alert-triangle", size: "sm", color: "warning" %>
                <%= tag.span t(".requires_update") %>
              </div>
            <% else %>
              <p class="text-secondary">
                <% if redbark_item.last_synced_at %>
                  <% if redbark_item.sync_status_summary %>
                    <%= t(".status_with_summary", timestamp: time_ago_in_words(redbark_item.last_synced_at), summary: redbark_item.sync_status_summary) %>
                  <% else %>
                    <%= t(".status", timestamp: time_ago_in_words(redbark_item.last_synced_at)) %>
                  <% end %>
                <% else %>
                  <%= t(".status_never") %>
                <% end %>
              </p>
            <% end %>
          </div>
        </div>

        <div class="flex items-center gap-2">
          <% if redbark_item.requires_update? %>
            <%= render DS::Link.new(
              text: t(".update_credentials"),
              icon: "refresh-cw",
              variant: "secondary",
              href: settings_providers_path,
              frame: "_top"
            ) %>
          <% else %>
            <%= icon(
              "refresh-cw",
              as_button: true,
              href: sync_redbark_item_path(redbark_item),
              disabled: redbark_item.syncing?
            ) %>
          <% end %>

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

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

        <%# Sync summary (collapsible) - using shared ProviderSyncSummary component %>
        <% stats = if defined?(@redbark_sync_stats_map) && @redbark_sync_stats_map
             @redbark_sync_stats_map[redbark_item.id] || {}
           else
             redbark_item.syncs.ordered.first&.sync_stats || {}
           end %>
        <%= render ProviderSyncSummary.new(
          stats: stats,
          provider_item: redbark_item
        ) %>

        <%# Compute unlinked accounts (no AccountProvider link) %>
        <% unlinked_count = redbark_item.unlinked_accounts_count %>

        <% if unlinked_count.to_i > 0 && redbark_item.accounts.empty? %>
          <%# No accounts imported yet - show prominent setup prompt %>
          <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_description", linked: redbark_item.linked_accounts_count, total: redbark_item.total_accounts_count) %></p>
            <%= render DS::Link.new(
              text: t(".setup_action"),
              icon: "plus",
              variant: "primary",
              href: setup_accounts_redbark_item_path(redbark_item),
              frame: :modal
            ) %>
          </div>
        <% elsif unlinked_count.to_i > 0 %>
          <%# Some accounts imported, more available - show subtle link %>
          <div class="pt-2 border-t border-primary">
            <%= link_to setup_accounts_redbark_item_path(redbark_item),
                        data: { turbo_frame: :modal },
                        class: "flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors" do %>
              <%= icon "plus", size: "sm" %>
              <span><%= t(".more_accounts_available", count: unlinked_count) %></span>
            <% end %>
          </div>
        <% elsif redbark_item.accounts.empty? && redbark_item.redbark_accounts.none? %>
          <%# No provider accounts at all - waiting for sync %>
          <div class="p-4 flex flex-col gap-3 items-center justify-center">
            <p class="text-primary font-medium text-sm"><%= t(".no_accounts_title") %></p>
            <p class="text-secondary text-sm"><%= t(".no_accounts_description") %></p>
          </div>
        <% end %>
      </div>
    <% end %>
  <% end %>
<% end %>