import { C as store_get, x as head, t as escape_html, y as ensure_array_like, E as unsubscribe_stores, q as attr, z as stringify, F as element, d as bind_props, j as getContext, o as attributes, B as clsx } from './index2-C1QMSCIx.js';
import 'clsx';
import './root-DLMkITFa.js';
import './state.svelte-BAMO-hRC.js';
import { c as cn } from './utils-B05Dmz_H.js';
import { t as tv } from './index-CoNVFdnx.js';
import { C as Card, a as Card_content } from './card-content-kqme4GTP.js';
import 'tailwind-merge';

const getStores = () => {
  const stores$1 = getContext("__svelte__");
  return {
    /** @type {typeof page} */
    page: {
      subscribe: stores$1.page.subscribe
    },
    /** @type {typeof navigating} */
    navigating: {
      subscribe: stores$1.navigating.subscribe
    },
    /** @type {typeof updated} */
    updated: stores$1.updated
  };
};
const page = {
  subscribe(fn) {
    const store = getStores().page;
    return store.subscribe(fn);
  }
};
const badgeVariants = tv({
  base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
      secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
      destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
      outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
    }
  },
  defaultVariants: { variant: "default" }
});
function Badge($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    let {
      ref = null,
      href,
      class: className,
      variant = "default",
      children,
      $$slots,
      $$events,
      ...restProps
    } = $$props;
    element(
      $$renderer2,
      href ? "a" : "span",
      () => {
        $$renderer2.push(`${attributes({
          "data-slot": "badge",
          href,
          class: clsx(cn(badgeVariants({ variant }), className)),
          ...restProps
        })}`);
      },
      () => {
        children?.($$renderer2);
        $$renderer2.push(`<!---->`);
      }
    );
    bind_props($$props, { ref });
  });
}
function _page($$renderer, $$props) {
  $$renderer.component(($$renderer2) => {
    var $$store_subs;
    let { data } = $$props;
    store_get($$store_subs ??= {}, "$page", page).url.searchParams.get("q") ?? "";
    const items = data?.items ?? [];
    const PB_BASE = "https://pocketbase.ccllc.pro";
    const COLLECTION = "Stackq_Items";
    function imageUrl(item) {
      if (!item.Image) return null;
      return `${PB_BASE}/api/files/${COLLECTION}/${item.id}/${item.Image}`;
    }
    head("rk8na7", $$renderer2, ($$renderer3) => {
      $$renderer3.title(($$renderer4) => {
        $$renderer4.push(`<title>Items – Stackq</title>`);
      });
    });
    {
      $$renderer2.push("<!--[!-->");
      $$renderer2.push(`<main class="container mx-auto flex flex-col gap-6 px-4 py-8"><div class="flex items-center justify-between"><h1 class="text-2xl font-semibold">Stackq Items</h1> <span class="text-muted-foreground text-sm">${escape_html(items.length)} items</span></div> `);
      if (items.length === 0) {
        $$renderer2.push("<!--[-->");
        Card($$renderer2, {
          children: ($$renderer3) => {
            Card_content($$renderer3, {
              class: "flex h-32 items-center justify-center",
              children: ($$renderer4) => {
                $$renderer4.push(`<p class="text-muted-foreground text-sm">No items.</p>`);
              },
              $$slots: { default: true }
            });
          },
          $$slots: { default: true }
        });
      } else {
        $$renderer2.push("<!--[!-->");
        $$renderer2.push(`<div class="flex flex-col gap-2"><!--[-->`);
        const each_array = ensure_array_like(items);
        for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
          let item = each_array[$$index];
          Card($$renderer2, {
            class: "overflow-hidden",
            children: ($$renderer3) => {
              Card_content($$renderer3, {
                class: "flex flex-row items-center gap-3 p-3",
                children: ($$renderer4) => {
                  $$renderer4.push(`<div class="size-12 shrink-0 overflow-hidden rounded border">`);
                  if (imageUrl(item)) {
                    $$renderer4.push("<!--[-->");
                    $$renderer4.push(`<img${attr("src", imageUrl(item))} alt="" class="size-full object-cover" loading="lazy"/>`);
                  } else {
                    $$renderer4.push("<!--[!-->");
                    $$renderer4.push(`<span class="text-muted-foreground flex size-full items-center justify-center text-xs">—</span>`);
                  }
                  $$renderer4.push(`<!--]--></div> <div class="min-w-0 flex-1"><a${attr("href", `/items/${stringify(item.id)}`)} class="font-medium hover:underline">${escape_html(item.Item ?? "—")}</a> <span class="text-muted-foreground font-mono text-xs">· ${escape_html(item.SKU ?? "—")}</span> `);
                  if (item.Description) {
                    $$renderer4.push("<!--[-->");
                    $$renderer4.push(`<span class="text-muted-foreground ml-1 truncate text-xs">· ${escape_html(item.Description)}</span>`);
                  } else {
                    $$renderer4.push("<!--[!-->");
                  }
                  $$renderer4.push(`<!--]--></div> <div class="flex shrink-0 items-center gap-2 text-xs">`);
                  Badge($$renderer4, {
                    variant: "outline",
                    children: ($$renderer5) => {
                      $$renderer5.push(`<!---->${escape_html(item.UOM ?? "—")}`);
                    },
                    $$slots: { default: true }
                  });
                  $$renderer4.push(`<!----> <span class="tabular-nums">${escape_html(item.Cost != null ? Number(item.Cost).toLocaleString() : "—")}</span> `);
                  if (item.Stock) {
                    $$renderer4.push("<!--[-->");
                    Badge($$renderer4, {
                      variant: "default",
                      class: "text-xs",
                      children: ($$renderer5) => {
                        $$renderer5.push(`<!---->Stock`);
                      },
                      $$slots: { default: true }
                    });
                  } else {
                    $$renderer4.push("<!--[!-->");
                  }
                  $$renderer4.push(`<!--]--></div>`);
                },
                $$slots: { default: true }
              });
            },
            $$slots: { default: true }
          });
        }
        $$renderer2.push(`<!--]--></div>`);
      }
      $$renderer2.push(`<!--]--></main>`);
    }
    $$renderer2.push(`<!--]-->`);
    if ($$store_subs) unsubscribe_stores($$store_subs);
  });
}

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