<%# locals: (family:) %>

<div
  class="space-y-3"
  data-controller="tabs"
  data-tabs-local-storage-key-value="account-sidebar-tabs"
  data-tabs-active-class="bg-white shadow-sm text-primary"
  data-tabs-inactive-class="text-secondary"
  data-tabs-default-tab-value="assets-tab">
  <div class="bg-surface-inset rounded-lg p-1 flex">
    <button type="button" data-id="assets-tab" class="w-1/3 px-2 py-1 rounded-md text-sm text-secondary" data-tabs-target="btn" data-action="click->tabs#select">
      Assets
    </button>

    <button type="button" data-id="debts-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm" data-tabs-target="btn" data-action="click->tabs#select">
      Debts
    </button>

    <button type="button" data-id="all-tab" class="w-1/3 px-2 py-1 rounded-md text-secondary text-sm" data-tabs-target="btn" data-action="click->tabs#select">
      All
    </button>
  </div>

  <div data-tabs-target="tab" id="assets-tab">
    <%= link_to new_account_path(step: "method_select"),
              class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
              data: { turbo_frame: "modal" } do %>
      <%= icon("plus") %>
      <span>New asset</span>
    <% end %>

    <div class="space-y-2">
      <% family.balance_sheet.account_groups("asset").each do |group| %>
        <%= render "accounts/accountable_group", account_group: group %>
      <% end %>
    </div>
  </div>

  <div data-tabs-target="tab" id="debts-tab" class="hidden">
    <%= link_to new_account_path(step: "method_select"),
              class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
              data: { turbo_frame: "modal" } do %>
      <%= icon("plus") %>
      <span>New debt</span>
    <% end %>

    <div class="space-y-2">
      <% family.balance_sheet.account_groups("liability").each do |group| %>
        <%= render "accounts/accountable_group", account_group: group %>
      <% end %>
    </div>
  </div>

  <div data-tabs-target="tab" id="all-tab" class="hidden">
    <%= link_to new_account_path(step: "method_select"),
              class: "flex items-center gap-3 btn btn--ghost text-secondary mb-1",
              data: { turbo_frame: "modal" } do %>
      <%= icon("plus") %>
      <span>New account</span>
    <% end %>

    <div class="space-y-2">
      <% family.balance_sheet.account_groups.each do |group| %>
        <%= render "accounts/accountable_group", account_group: group %>
      <% end %>
    </div>
  </div>
</div>
