<% content_for :page_header do %>
  <div class="space-y-1 mb-6 flex gap-4 justify-between items-center lg:items-start">
    <div class="space-y-1">
      <h1 class="text-xl lg:text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
      <p class="text-sm lg:text-base text-secondary">Here's what's happening with your finances</p>
    </div>

    <%= render LinkComponent.new(
      icon: "plus",
      text: "New",
      href: new_account_path,
      frame: :modal,
      class: "hidden lg:inline-flex"
    ) %>

    <%= render LinkComponent.new(
        variant: "icon-inverse",
        icon: "plus",
        href: new_account_path,
        frame: :modal,
        class: "rounded-full lg:hidden"
      ) %>
  </div>
<% end %>

<div class="w-full space-y-6 pb-24">
  <% if Current.family.accounts.any? %>
    <section class="bg-container py-4 rounded-xl shadow-border-xs">
      <%= render partial: "pages/dashboard/net_worth_chart", locals: {
        balance_sheet: @balance_sheet,
        period: @period
      } %>
    </section>
    <section>
      <%= render "pages/dashboard/balance_sheet", balance_sheet: @balance_sheet %>
    </section>

    <%= turbo_frame_tag "cashflow_sankey_section" do %>
      <section class="bg-container py-4 rounded-xl shadow-border-xs">
        <%= render partial: "pages/dashboard/cashflow_sankey", locals: {
          sankey_data: @cashflow_sankey_data,
          period: @cashflow_period
        } %>
      </section>
    <% end %>
  <% else %>
    <section>
      <%= render "pages/dashboard/no_accounts_graph_placeholder" %>
    </section>
  <% end %>
</div>
