#import "./custom_html.typ" as chtml

/// Generate a "card" fom a page summary.
#let gen_summary_card(summ) = {
  ```raw-css
  summary-card {
    display: flex;
    flex-direction: column;
    max-width: 400px;

    a {
      color: inherit;
      text-decoration: inherit;
    }

    padding: 1em;
    margin: 1em;
    border: solid;
    border-radius: 1em;

    p {
      margin: 0;
    }

    summary-card-preview {
      display: flex;
      flex-direction: column;
      width: 100%;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    summary-card-description {
      display: flex;
      flex-direction: column;
      text-align: justify;
      height: 100%;

      h3 {
        text-align: center;
        margin: 0.5em;
      }

      summary-card-details {
        text-align: left;
        margin-top: auto;
        padding-top: 1em;
      }

      tag-box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.3em;

        .tag {
          max-width: ;
          overflow: hidden;
          text-overflow: ellipsis;
          display:inline-block;
          white-space: nowrap;

          background-color: var(--color-bg-highlight);
          margin: 0.1em;
          padding-top: 0.1em;
          padding-bottom: 0.1em;
          padding-left: 0.4em;
          padding-right: 0.4em;
          border-radius: 1em;

        }
      }

    }

  }
  ```
  chtml.summary-card({
      chtml.summary-card-preview({
        link(summ.page-label, summ.preview-image)
        if summ.img-copyright != none {
          html.small[Image: #sym.copyright #summ.img-copyright]
        }
      })
      chtml.summary-card-description({
        heading(level: 2, link(summ.page-label, summ.title))

        link(summ.page-label, summ.description)

        chtml.summary-card-details(summ.date.display())
        chtml.tag-box(for tag in summ.tags { html.span(class: ("tag",), "#" + tag) })
      })
  })
}

/// Summary of a page.
/// Store data form `set document(...)` and `show: webpage.with(...)` in `summ.document-args` and `summ.template-args`,
/// and generate a summary card that can be used as a link for the page.
#let summary(
  /// The url of the page
  url: none,
  /// The title of the page
  title: none,
  /// The image preview of the page.
  /// Right now, this cannot be used for link preview because open graph expect an url for the image, and typst inline
  /// the images directly in the html file in base64.
  preview-image: none,
  /// The copyright for the image 
  img-copyright: none,
  /// The author or authors of the page
  author: none,
  /// A description of the page
  description: none,
  /// The date of publication (or maybe update?) of the page.
  date: none,
  /// Tags associated to the content of the page
  tags: (),
  /// Label of the page (for links)
  page-label: none,
) = {
  assert(type(url) == str, message: "summary() must have an url")
  assert(type(title) == str or type(title) == content, message: "summary() must have title")
  assert(type(preview-image) != none, message: "summary() must have a preview-image")
  assert(author != none, message: "summary() must have at least one author")
  assert(description != none, message: "summary() must have a description")
  assert(date != none, message: "summary() must have a date")

  if page-label == none {
    page-label = label(path)
  }

  let summ = (
    url: url,
    title: title,
    description: description,
    date: date,
    tags: tags,
    page-label: page-label,
    path: path,
    preview-image: preview-image,
    img-copyright: img-copyright,
    card: []
  )
  summ.card = gen_summary_card(summ)
  return summ
}

#let summary-sort-key(summ) = -(
  summ.date.day()-1 + 31 * (
    (summ.date.month()-1) + 
    12 * summ.date.year()
  )
)

/// Display a list of summary cards.
///
/// min-width is the minimum width of the cards, in px.
#let card-list(min-width: 400, summs) = {
  let class-name = "summary-card-list-" + str(min-width)
  raw(
    ```
    summary-card-list.<CLASSNAME> {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, <MINWIDTH>px), 1fr));
  
      summary-card {
        max-width: none;
      }
    }
    ```.text.replace("<CLASSNAME>", class-name).replace("<MINWIDTH>", str(min-width)),
    lang: "raw-css",
  )
  chtml.summary-card-list(attrs: (class: class-name), {
    for summ in summs.sorted(key: summary-sort-key) {
      summ.card
    }
  })
}
