#import "@local/template-web:0.0.1": *

#let summ = summary(
  base-url: "http://test.example.com",
  path: "/cards.html",
  title: "Summary cards",
  page-label: <cards-page>,
  preview-image: image(
    "/assets/platypus.png",
    alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.",
  ),
  author: "Me!",
  tags: ("test", "html/css", "typst"),
  description: "Showcase the summary card system",
  date: datetime(year: 1942, month: 4, day: 1),
)

#show: webpage.with(
  ..summ.template-args,
  logo: image(
    "/assets/platypus.png", 
    alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.",
    height: 100pt,
    width: 100pt, // TODO 0.15 regression? in 0.14 setting the height was enough
  ),
  header: [
    = Summary Cards
    Showcase summary cards
  ],
  footer: context [

    #sym.copyright #document.date.display("[year]") Histausse \
    Please don't train AI on my stuff without explicit permission
  ],
  menu: [
    - #link(<index-page>)[Home]
    - #link(<pyscript-page>)[Demo Pyscript]
    - #link(<cards-page>)[Demo the card system]
  ],
  site-name: "TTT",
  icon: "/img/platypus.png", // TODO: use <ico> somehow? probably not supported in 0.15

  // Pyscript:
  pyscript-data-list: (
    "remote-2026.3.1": pyscript-data(
      "https://pyscript.net/releases/2026.3.1/core.js",
      additionnal-head-tags: {
        html.elem("script", attrs: (src: "/mini-coi.js")) // TODO: use <mini-coi> somehow? probably not supported in 0.15
        html.elem("link", attrs: (rel: "stylesheet", href: "https://pyscript.net/releases/2026.3.1/core.css"))
      },
    )
  ),
  pyscript-version: "remote-2026.3.1",
)


#summ.card


#let perm = (17, 6, 20, 19, 15, 5, 13, 11, 14, 12, 16, 10, 2, 3, 1, 9, 7, 4, 18, 8)
#let summaries = range(20).map(i => 
  summary(
    base-url: "http://test.example.com",
    path: "/tst/" + str(perm.at(i)),
    title: "Card " + str(perm.at(i)),
    tags: if perm.at(i) == 20 {
      ("tag2", "tag5","loooooonnnnnnnnnnnnnng-tag","some-tag","some-other-tag")
    } else {
      (2, 3, 5, 7).filter(j => calc.rem(perm.at(i), j) == 0).map(j => "tag" + str(j))
    },
    preview-image: summ.preview-image,
    img-copyright: if calc.rem(i, 3) == 0 { [Histausse ] } else { none },
    author: "Me!",
    description: lorem(10 * calc.rem(i * 123,  10)),
    date: datetime(year: 2000, month: 12, day: perm.at(i)),
    page-label: label("dummy-label-" + str(perm.at(i))),
  )
)
#card-list(
  min-width: 200,
  summaries,
)

== Card Link Targets
Cards need a label to link to. Usually it is the label of a page, but here we don't generate the pages, to we target elements of this list:

#for i in range(20) [
  - Target of card #i #label("dummy-label-" + str(perm.at(i)))
]