#import "./custom_html.typ" as chtml
#import "./html_utils.typ": get-css

/// Generate the html <head> element for the page.
#let html_head(
  /// Page url,
  url,
  /// Title of the page
  title,
  /// Path to the icon (TODO: /!\ must be an url, typst image not yet supported)
  icon: none,
  /// Type of the page for open-graph data
  og-type: "website",
  /// Name of the site for metadata of the page
  site-name: none,
  /// Description of the site for metadata, default to document.description
  description: none,
  /// Author of the site for metadata, default to document.author
  author: none,
  /// Additional stylesheet for the page: must be a list of url
  stylesheets: (),
  /// List of related sites for metadata
  me-links: (),
) = {
  html.head({
    html.meta(charset: "utf-8")
    if title != none {
      html.title(title)
    } else { context {
      html.title(document.title)
    }}
    // html.meta(http-equiv: "Content-Language", content: "en") Obsolet, now use the html tag attr "lang" instead

    // The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
    // The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
    html.meta(name: "viewport", content: "width=device-width, initial-scale=1.0")

    // Only set the Referer header for out request to the same origin
    html.meta(name: "referrer", content: "same-origin")

    if icon != none {
      html.link(rel: "icon", type: "image/png", href: icon)
    }

    // Open Graph (https://ogp.me/), used by social media for link previsualisation
    if title != none {
      chtml.meta-og(property: "og:title", content: title)
    } else { context {
      if document.title != none {
        assert(document.title.has("text"), message: "document.title must be a string")
        chtml.meta-og(property: "og:title", content: document.title.at("text"))
      }
    }}
    chtml.meta-og(property: "og:type", content: og-type)
    chtml.meta-og(property: "og:url", content: url)
    if icon != none {
      chtml.meta-og(property: "og:image", content: icon) // TODO: right now the logo need to be the full URL
    }
    if site-name != none {
      chtml.meta-og(property: "og:site_name", content: site-name)
    }
    if description != none {
      chtml.meta-og(property: "og:description", content: description)
    }

    // Check https://www.w3schools.com/tags/att_link_rel.asp for other interesting link rel
    for stylesheet in stylesheets {
      html.link(rel: "stylesheet", type: "text/css", href: stylesheet)
    }
    for me-link in me-links {
      html.elem("link", attrs: (rel: "me", href: me-link))
    }
    if description != none {
      html.meta(name: "description", content: description)
    } else { context {
      if document.description != none {
        assert(document.description.has("text"), message: "document.description must be a string")
        html.meta(name: "description", content: document.description.at("text"))
      }
    }}
    if author != none {
      html.meta(name: "author", content: author)
    } else { context {
      if document.author != () {
        html.meta(name: "author", content: document.author.join(", "))
      }
    }}

    html.style(get-css())

  })
}
