// PageHeader: the top of a page: where it sits (a breadcrumb), its title, a line
// about it, and what can be done to it (buttons), in one row that wraps on phones.
//
//   <PageHeader title="Orders" description="Everything bought this month."
//               breadcrumb={<Breadcrumbs items={[{ label: "Home", href: "/" }, { label: "Orders" }]}/>}
//               actions={[<Button variant="outline">Export</Button>, <Button>New order</Button>]}/>
//   <PageHeader title="Ada Lovelace" eyebrow="Customer" avatar={<Avatar name="Ada Lovelace"/>}
//               meta={<Badge tone="success">Active</Badge>} back="/customers">
//       <Tabs> ... </Tabs>
//   </PageHeader>
//
// title: the page's <h1>. eyebrow: a small line above it (a category, a section).
// description: a line under it. meta: HTML under the description (small facts: a
// Badge, a date, a count). avatar: HTML before the title (an Avatar, an icon).
// breadcrumb: HTML above the title (a Breadcrumbs). back: an href for a "Back" link
// above the title instead, with back_label as its text ("Back").
// actions: HTML at the right end of the row (buttons); on a phone they go under.
// children: below the row (tabs, a filter bar). divider: a line along its bottom (true).

import ui/theme.qwe use ui_cls

let page_header_css = css`
.ui-pagehead { display: grid; gap: 12px; padding-bottom: 20px; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }
.ui-pagehead-line { border-bottom: 1px solid var(--ui-border); }
.ui-pagehead-back {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content; color: var(--ui-muted); font-size: 14px;
  text-decoration: none; border-radius: var(--ui-radius-sm);
}
.ui-pagehead-back:hover { color: var(--ui-fg); }
.ui-pagehead-back:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-pagehead-back svg { width: 16px; height: 16px; }
.ui-pagehead-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.ui-pagehead-main { display: flex; flex: 1 1 320px; align-items: flex-start; gap: 14px; min-width: 0; }
.ui-pagehead-avatar { flex: none; padding-top: 2px; }
.ui-pagehead-text { display: grid; gap: 4px; min-width: 0; }
.ui-pagehead-eyebrow { color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ui-pagehead-title { margin: 0; font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ui-pagehead-desc { max-width: 64ch; margin: 0; color: var(--ui-muted); }
.ui-pagehead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; color: var(--ui-muted); font-size: 14px; }
.ui-pagehead-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ui-pagehead-below:empty { display: none; }
.ui-pagehead-below > :first-child { margin-top: 0; }
@media (max-width: 599px) { .ui-pagehead-title { font-size: 22px; } .ui-pagehead-actions { width: 100%; margin-left: 0; } }
`

view PageHeader(title: str, eyebrow: str? = null, description: str? = null, meta = null, avatar = null,
                breadcrumb = null, back: str? = null, back_label: str = "Back", actions = null, divider: bool = true,
                class: str? = null, children) {
    style global page_header_css
    <header class={ui_cls(["ui-pagehead", divider && "ui-pagehead-line", class])}>
        {breadcrumb != null
            ? <div.ui-pagehead-crumb>{breadcrumb}</div>
            : back != null && <a.ui-pagehead-back href={back}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                     stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
                {back_label}
            </a>}
        <div.ui-pagehead-row>
            <div.ui-pagehead-main>
                {avatar != null && <div.ui-pagehead-avatar>{avatar}</div>}
                <div.ui-pagehead-text>
                    {eyebrow != null && <span.ui-pagehead-eyebrow>{eyebrow}</span>}
                    <h1.ui-pagehead-title>{title}</h1>
                    {description != null && <p.ui-pagehead-desc>{description}</p>}
                    {meta != null && <div.ui-pagehead-meta>{meta}</div>}
                </div>
            </div>
            {actions != null && <div.ui-pagehead-actions>{actions}</div>}
        </div>
        <div.ui-pagehead-below>{children}</div>
    </header>
}