import { x as head, t as escape_html, y as ensure_array_like, q as attr, z as stringify } from './index2-C1QMSCIx.js';
import { B as Button } from './button-rjWrqfIB.js';
import { C as Card, a as Card_content } from './card-content-kqme4GTP.js';
import 'clsx';
import { I as Input } from './input-exu4cbli.js';
import './utils-B05Dmz_H.js';
import 'tailwind-merge';
import './index-CoNVFdnx.js';

function _page($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    let { data } = $$props;
    let searchQuery = "";
    const accounts = data?.accounts ?? [];
    const filteredAccounts = (() => {
      const q = searchQuery.trim().toLowerCase();
      if (!q) return accounts;
      return accounts.filter((a) => a.id.toLowerCase().includes(q));
    })();
    let $$settled = true;
    let $$inner_renderer;
    function $$render_inner($$renderer3) {
      head("11yx1mx", $$renderer3, ($$renderer4) => {
        $$renderer4.title(($$renderer5) => {
          $$renderer5.push(`<title>Accounts – Stackq</title>`);
        });
      });
      $$renderer3.push(`<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8"><div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"><div class="flex items-center gap-3 min-w-0"><a href="/" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to main">Back</a> <h1 class="text-xl font-semibold truncate sm:text-2xl">Accounts</h1></div> <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-2"><div class="w-full sm:w-64 sm:min-w-0">`);
      Input($$renderer3, {
        type: "search",
        placeholder: "Search accounts…",
        class: "h-11 w-full sm:h-9",
        get value() {
          return searchQuery;
        },
        set value($$value) {
          searchQuery = $$value;
          $$settled = false;
        }
      });
      $$renderer3.push(`<!----></div> <span class="text-muted-foreground text-sm shrink-0">${escape_html(filteredAccounts.length)}${escape_html(filteredAccounts.length !== accounts.length ? ` of ${accounts.length}` : "")} accounts</span> <a href="/accounts/new" class="block shrink-0">`);
      Button($$renderer3, {
        class: "w-full sm:w-auto min-h-11",
        children: ($$renderer4) => {
          $$renderer4.push(`<!---->New account`);
        },
        $$slots: { default: true }
      });
      $$renderer3.push(`<!----></a></div></div> `);
      if (filteredAccounts.length === 0) {
        $$renderer3.push("<!--[-->");
        Card($$renderer3, {
          children: ($$renderer4) => {
            Card_content($$renderer4, {
              class: "flex flex-col items-center justify-center gap-4 py-12",
              children: ($$renderer5) => {
                $$renderer5.push(`<p class="text-muted-foreground text-center text-sm">${escape_html(accounts.length === 0 ? "No accounts yet." : "No accounts match your search.")}</p> <p class="text-muted-foreground text-center text-xs">${escape_html(accounts.length === 0 ? "Create an account to get started." : "Try a different search.")}</p> <a href="/accounts/new">`);
                Button($$renderer5, {
                  variant: "outline",
                  children: ($$renderer6) => {
                    $$renderer6.push(`<!---->New account`);
                  },
                  $$slots: { default: true }
                });
                $$renderer5.push(`<!----></a> <a href="/">`);
                Button($$renderer5, {
                  variant: "ghost",
                  children: ($$renderer6) => {
                    $$renderer6.push(`<!---->Back to home`);
                  },
                  $$slots: { default: true }
                });
                $$renderer5.push(`<!----></a>`);
              },
              $$slots: { default: true }
            });
          },
          $$slots: { default: true }
        });
      } else {
        $$renderer3.push("<!--[!-->");
        $$renderer3.push(`<div class="flex flex-col gap-2"><!--[-->`);
        const each_array = ensure_array_like(filteredAccounts);
        for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
          let account = each_array[$$index];
          Card($$renderer3, {
            children: ($$renderer4) => {
              Card_content($$renderer4, {
                class: "p-4",
                children: ($$renderer5) => {
                  $$renderer5.push(`<a${attr("href", `/accounts/${stringify(account.id)}`)} class="font-medium hover:underline">Account ${escape_html(account.id)}</a>`);
                },
                $$slots: { default: true }
              });
            },
            $$slots: { default: true }
          });
        }
        $$renderer3.push(`<!--]--></div>`);
      }
      $$renderer3.push(`<!--]--></main>`);
    }
    do {
      $$settled = true;
      $$inner_renderer = $$renderer2.copy();
      $$render_inner($$inner_renderer);
    } while (!$$settled);
    $$renderer2.subsume($$inner_renderer);
  });
}

export { _page as default };
//# sourceMappingURL=_page.svelte-PNsQXu0K.js.map