<%# locals: (account:, return_to: nil) %>

<%= turbo_frame_tag dom_id(account) do %>
  <div class="p-4 flex items-center justify-between gap-3 group/account">
    <div class="flex items-center gap-3">
      <%= render "accounts/logo", account: account, size: "md" %>

      <div>
        <% if account.pending_deletion? %>
          <p class="text-sm font-medium text-primary">
            <span>
              <%= account.name %>
            </span>
            <span class="text-red-500 animate-pulse">
              (deletion in progress...)
            </span>
          </p>
        <% else %>
          <div>
            <%= link_to account.name, account, class: [(account.active? ? "text-primary" : "text-subdued"), "text-sm font-medium hover:underline"], data: { turbo_frame: "_top" } %>
            <% if account.simplefin_account&.org_data&.dig('name') %>
              <span class="text-secondary">• <%= account.simplefin_account.org_data["name"] %></span>
            <% end %>
          </div>
          <% if account.long_subtype_label %>
            <p class="text-sm text-secondary truncate"><%= account.long_subtype_label %></p>
          <% end %>
        <% end %>
      </div>

      <% unless account.pending_deletion? %>
        <%= link_to edit_account_path(account, return_to: return_to), data: { turbo_frame: :modal }, class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center" do %>
          <%= icon("pencil-line", size: "sm") %>
        <% end %>

        <% if !account.linked? && ["Depository", "CreditCard", "Investment"].include?(account.accountable_type) %>
          <%= link_to select_provider_account_path(account),
                      data: { turbo_frame: :modal },
                      class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center gap-1",
                      title: t("accounts.account.link_provider") do %>
            <%= icon("link", size: "sm") %>
          <% end %>
        <% elsif account.linked? %>
          <%= link_to confirm_unlink_account_path(account),
                      data: { turbo_frame: :modal },
                      class: "group-hover/account:flex hidden hover:opacity-80 items-center justify-center gap-1",
                      title: t("accounts.account.unlink_provider") do %>
            <%= icon("unlink", size: "sm") %>
          <% end %>
        <% end %>
      <% end %>
    </div>
    <div class="flex items-center gap-8">
      <% if account.draft? %>
        <!-- Balance hidden for draft accounts -->
      <% elsif account.syncing? %>
        <div class="w-16 h-6 bg-loader rounded-full animate-pulse"></div>
      <% else %>
        <p class="text-sm font-medium <%= account.active? ? "text-primary" : "text-subdued" %>">
          <%= format_money account.balance_money %>
        </p>
      <% end %>

      <% if account.draft? %>
        <%= render DS::Link.new(
          text: "Complete setup",
          href: edit_account_path(account, return_to: return_to),
          variant: :outline,
          frame: :modal
        ) %>
      <% elsif account.active? || account.disabled? %>
        <%= form_with model: account, url: toggle_active_account_path(account), method: :patch, data: { turbo_frame: "_top", controller: "auto-submit-form" } do |f| %>
          <%= render DS::Toggle.new(
            id: "account_#{account.id}_active",
            name: "active",
            checked: account.active?,
            data: { auto_submit_form_target: "auto" }
          ) %>
        <% end %>
      <% end %>
    </div>
  </div>
<% end %>
