<div class="space-y-4 pb-6 lg:pb-12 flex flex-col">
  <header class="flex justify-between items-center text-primary font-medium">
    <h1 class="text-xl">Transactions</h1>
    <div class="flex items-center gap-5">
      <div class="flex items-center gap-2">
        <%= render DS::Menu.new do |menu| %>
          <% menu.with_item(variant: "link", text: "New rule", href: new_rule_path(resource_type: "transaction"), icon: "plus", data: { turbo_frame: :modal }) %>
          <% menu.with_item(variant: "link", text: "Edit rules", href: rules_path, icon: "git-branch", data: { turbo_frame: :_top }) %>
          <% menu.with_item(variant: "link", text: "Edit categories", href: categories_path, icon: "shapes", data: { turbo_frame: :_top }) %>
          <% menu.with_item(variant: "link", text: "Edit tags", href: tags_path, icon: "tags", data: { turbo_frame: :_top }) %>
          <% menu.with_item(variant: "link", text: "Edit merchants", href: family_merchants_path, icon: "store", data: { turbo_frame: :_top }) %>
          <% menu.with_item(variant: "link", text: "Edit imports", href: imports_path, icon: "hard-drive-upload", data: { turbo_frame: :_top }) %>
          <% menu.with_item(variant: "link", text: "Import", href: new_import_path, icon: "download", data: { turbo_frame: "modal", class_name: "md:!hidden" }) %>
          <% if @uncategorized_count > 0 %>
            <% menu.with_item(variant: "link", text: t(".categorize_button", count: @uncategorized_count), href: transactions_categorize_path, icon: "tag", data: { turbo_frame: :_top }) %>
          <% end %>
        <% end %>

        <div class="hidden md:flex">
          <%= render DS::Link.new(
            text: t(".import"),
            icon: "download",
            variant: "outline",
            href: new_import_path,
            frame: :modal,
          ) %>
        </div>

        <%= render DS::Link.new(
            text: "New transaction",
            icon: "plus",
            variant: "primary",
            href: new_transaction_path,
            frame: :modal,
            class: "hidden md:inline-flex"
          ) %>

        <%= render DS::Link.new(
            icon: "plus",
            variant: "icon-inverse",
            href: new_transaction_path,
            frame: :modal,
            class: "rounded-full md:hidden"
          ) %>
      </div>
    </div>
  </header>

  <%= render "summary", totals: @search.totals %>
  <% if Current.family.recurring_transactions_disabled? %>
    <%= render "transactions/list", transactions: @transactions, projected_recurring: @projected_recurring, q: params[:q], pagy: @pagy %>
  <% else %>
    <%= render DS::Tabs.new(active_tab: params[:tab].presence || "transactions") do |tabs| %>
      <% tabs.with_nav(classes: "max-w-fit") do |nav| %>
        <% nav.with_btn(id: "transactions", label: t("transactions.show.tab_transactions"), classes: "px-6") %>
        <% nav.with_btn(id: "upcoming", label: t("transactions.show.tab_upcoming"), classes: "px-6") %>
      <% end %>

      <% tabs.with_panel(tab_id: "transactions") do %>
        <div class="bg-container rounded-xl shadow-border-xs">
          <%= render "transactions/list", transactions: @transactions, projected_recurring: @projected_recurring, q: params[:q], pagy: @pagy %>
        </div>
      <% end %>

      <% tabs.with_panel(tab_id: "upcoming") do %>
        <div class="bg-container rounded-xl shadow-border-xs">
          <%= render "transactions/upcoming" %>
        </div>
      <% end %>
    <% end %>
  <% end %>
</div>
