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

#let summ = summary(
  url: "http://test.example.com",
  title: "TeTyTe",
  preview-image: image(
    "./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!",
  description: "Test of the TTT template",
  date: datetime(year: 1942, month: 4, day: 1),
)

#set document(
  ..summ.document-args
)
#show: webpage.with(
  ..summ.template-args,
  home: link(
    "http://test.example.com",
    image(
      "./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: 2em,
    )
  ),
  logo: image(
    "./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,
  ),
  header: [
    = Test TeTyTe
    Hello World!
  ],
  footer: context [

    #sym.copyright #document.date.display("[year]") Histausse \
    Please don't train AI on my stuff without explicit permission
  ],
  menu: [
    - #link("example.com")[Hello Void!]
    - #link("example.com")[Demons]
    - #link("example.com")[Run]
    - #link("example.com")[When]
    - #link("example.com")[A]
    - #link("example.com")[Good]
    - #link("example.com")[Man]
    - #link("example.com")[Goes]
    - #link("example.com")[To]
    - #link("example.com")[War]
  ],
  site-name: "TTT",
  icon: "https://jean-marie.mineau.eu/website_assets/platypus.png",
)


#lorem(400)

#summ.card

Test, `this is not a code block`, end test.

```python
def plopliplop(n: int)
  for i in range(n):
    if i % 3 == 0 and i % 5 == 0:
      print("plopliplop")
    elif i % 3 == 0:
      print("plop")
    elif i % 5 == 0:
      print("plip")
    else:
      print(i)
```

#raw(range(10).map(i => lorem(100)).join("\n"), block: true)

/*
#figure({
  show table: set text(size: 0.80em)
  table( 
    columns: 5,
    //inset: (x: 0% + 5pt, y: 0% + 2pt),
    stroke: none,
    align: center+horizon,
    table.hline(),
    table.header(
      table.cell(colspan: 5, inset: 3pt)[],
      table.cell(rowspan: 2)[*SDK version*],
      table.vline(end: 3),
      table.vline(start: 4),
      table.cell(colspan: 4)[*Number of API methods*],
      [Documented], [In emulator], [Only documented], [Only in emulator],
    ),
    table.cell(colspan: 5, inset: 3pt)[],
    table.hline(),
    table.cell(colspan: 5, inset: 3pt)[],

    [32], [495713], [499837], [1060], [5184],
    [33], [537427], [539236], [1258], [3067],
    [34], [605106], [605098], [26], [18],

    table.cell(colspan: 4, inset: 3pt)[],
    table.hline(),
  )},

  caption: [Comparison of API methods between documentation and emulators],
)<tab:cl-platform_apis>
*/

```raw-css
table {
  //border: 1px solid blue;
  border-bottom: 1px solid #999999;
  border-top: 1px solid #999999;
  border-collapse: collapse;
  margin: 0.4em;
}
th, td {
  padding: 0.2em 0.5em;
}
td {
  //border: 1px solid red;
}

thead {
  border-bottom: 1px solid #999999;
}
```
/*
#table( 
  columns: 5,
  //inset: (x: 0% + 5pt, y: 0% + 2pt),
  //stroke: none,
  align: center+horizon,
  table.hline(),
  table.header(
    table.cell(rowspan: 2)[*SDK version*],
    table.cell(colspan: 4)[*Number of API methods*],
    table.cell(stroke: black)[Documented], [In emulator], [Only documented], [Only in emulator],
  ),
  table.hline(),
  [32], [495713], [499837], [1060], [5184],
  [33], [537427], [539236], [1258], [3067],
  [34], [605106], [605098], [26], [18],
  table.hline(),
)
*/

#figure(
  image(
    "./smol-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.",
  ),
  caption: [A Platypus!]
)
#figure(
  image(
    "./big-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.",
  ),
  caption: [A Big Platypus!]
)

#let perm = (17, 6, 20, 19, 15, 5, 13, 11, 14, 12, 16, 10, 2, 3, 1, 9, 7, 4, 18, 8)
#card-list(
  min-width: 200,
  range(20).map(i => 
    summary(
      url: "http://test.example.com",
      title: "Card " + str(perm.at(i)),
      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)),
    )
  )
)
