#import "./custom_html.typ" as chtml
#import "./theme_picker.typ": theme_picker
#import "./theme_colors.typ": theme_colors_css

/// Make the body of the webpage
#let html_body(
  /// The visible header of the page
  header: [],
  /// Logo of the site, must be an url (TODO)
  logo,
  /// Logo alt-text
  logo_alt,
  body
) = {
  theme_colors_css
  ```raw-css
  site-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;

    nav {
      display: flex;
      theme-picker {
        margin-left: auto;
      }
    }
  
    site-container {
      width: 1050px;
      padding: 0 20px;
  
      header {
        // display: flex
        // flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 15px 5px;
        border-bottom: solid 1px var(--color-border);
        margin-top: 15px;
      }
    }

    code-block {
      display: flex;
      justify-content: center;
      align-items: center;

      pre {
        width: min-content;
        padding: 8px;
        border-radius: 8px;
        background-color: var(--color-code-bg);
        box-shadow: inset 0px 0px 5px 0px #000;
      }
    }
  }
  ```
  html.body({
    chtml.site-wrapper({
      chtml.site-container({
        html.nav({
          theme_picker()
        })
        html.header(style: "display: flex; flex-wrap: wrap-reverse;", {
          html.hgroup({
            header
          })
          // typst `image` function embed the image in the html, which is not great,
          // and logo is also used for icon, so it's necessarily an url
          if logo != none {
            html.img(src: logo, alt: logo_alt, height: 100) // TODO: height bad
          }
        })
        body
      })
    })
  })
}