#import "/static/index.typ": stylesheets

#let docs-page(title: none, route: none, content) = {
  document(
    route + "index.html",
    title: title,
    html.html({
      html.head({
        html.meta(charset: "utf-8")
        html.meta(name: "viewport", content: "width=device-width, initial-scale=1")
        html.meta(name: "color-scheme", content: "dark light")
        for stylesheet in stylesheets {
          html.link(rel: "stylesheet", href: stylesheet)
        }
        html.title(context title)
      })
      html.body({
        html.a(href: "#main", [Skip to content])

        // html.header([header])

        html.nav(aria-label: "Table of Contents", context {
          html.ul({
            for doc in query(document) {
              html.li({
                html.details(open: doc == query(selector(document).before(here())).last(), {
                  html.summary(link(doc.location(), doc.title))
                  html.ul(context for sec in query(selector(heading.where(level: 1)).within(doc.location())) {
                    html.li(link(
                      sec.location(),
                      [#counter(heading).display(at: sec.location()) #sec.body],
                    ))
                  })
                })
              })
            }
          })
        })

        html.nav(aria-label: "Outline", context {
          let doc = query(selector(document).before(here())).last()
          show html.elem.where(tag: "nav"): it => it.body
          show html.elem.where(tag: "ol"): it => html.elem("ul", it.body)
          outline(title: none, depth: 2, target: selector(heading).within(doc.location()))
        })

        html.main(id: "main", {
          html.h1(title)
          content

          html.nav(aria-label: "Page Navigation", context {
            let prevs = query(selector(document).before(here()))
            let nexts = query(selector(document).after(here()))

            html.ul({
              if (prevs.len() > 1) {
                let prev = prevs.at(-2)
                html.li(
                  aria-label: "Prev Page",
                  link(prev.location(), prev.title),
                )
              }

              if (nexts.len() > 0) {
                show html.elem.where(tag: "a"): it => it
                let next = nexts.at(0)
                html.li(
                  aria-label: "Next Page",
                  link(next.location(), next.title),
                )
              }
            })
          })
        })

        // html.footer([footer])
      })
    }),
  )
}

#let callout(kind: str, body) = html.aside(aria-label: kind, body)

#let note = callout.with(kind: "note")
#let warn = callout.with(kind: "warn")
#let tip = callout.with(kind: "tip")