#collection-stats.s-sidebarwidget
  .s-sidebarwidget--header Collection
    .s-sidebarwidget--action
      input(type="hidden" name="account" value=account)
      button.s-link(hx-post="/api/load-collection" hx-target="#collection-sync" hx-select="#collection-sync" hx-include="previous input") Sync

  if !hasFullTrackData && arrange !== "tag"
    p.s-sidebarwidget--content
      a.s-btn.s-btn__outlined.s-btn__muted(href="./" + and({arrange: "tag", shape: "grid"})) Download tags for more stats

  table.s-sidebarwidget--content.s-sidebarwidget__items
    tr.s-sidebarwidget--item
      th items
      td= count.total
    if hasFullTrackData
      tr.s-sidebarwidget--item
        th runtime
        td= count.runtime
    tr.s-sidebarwidget--item
      th format
      td
        = count.albums
        span.fc-black-400= ` albums`
        span.fc-black-250= ` / `
        = count.singles
        span.fc-black-400= ` singles`
    tr.s-sidebarwidget--item
      th price
      td
        = count.free
        span.fc-black-400= ` free`
        span.fc-black-250= ` / `
        = count.paid
        span.fc-black-400= ` paid`
    if hasFullTrackData
      tr.s-sidebarwidget--item
        th tracks
        td
          = count.tracks
          span.pl8.fc-black-250= ` / `
          span.fc-black-400 avg #{count.avgTracks}
    if hasFullTrackData
      tr.s-sidebarwidget--item
        th tags
        td
          = count.tags
          span.pl8.fc-black-250= ` / `
          span.fc-black-400 avg #{count.avgTags}
          span.fc-black-250= ` / `
          span.fc-black-400 lonely #{count.lonelyTags}
    tr.s-sidebarwidget--item
      th value
      td
        = `${count.value} `
        span.fc-black-400 #{count.displayCurrency}
    tr.s-sidebarwidget--item
      th diversity
      //- supernova red-500, warm yellow-500, hot orange-500
      //- 0-9 black, 10-99 yellow, 100-999 orange, 1000+ red
      td.w100
        .s-progress.d-grid.g2.h4.mtn6(style=`grid-template-columns: ${count.taste.map(t => t + "fr").join(" ")}`).bg-white.fc-black-400.fs-fine.lh-xxl
          .s-progress--bar.bg-black-400(title=`${count.taste[0]} labels with <20 fans`)= count.taste[0]
          .s-progress--bar.bg-yellow-400(title=`${count.taste[1]} labels with 20-199 fans`)= count.taste[1]
          .s-progress--bar.bg-orange-400(title=`${count.taste[2]} labels with 200-1999 fans`)= count.taste[2]
          .s-progress--bar.bg-red-400(title=`${count.taste[3]} labels with >2000 fans`)= count.taste[3]
    tr.s-sidebarwidget--item
      th currency
      td.w100
        - var totalLabels = count.currencies.reduce((a, c) => a + c[1], 0)
        - var palette = ["red", "orange", "green", "blue", "purple", "bronze"]
        - var i = 0
        .s-progress.d-grid.g2.h4.mtn6(style=`grid-template-columns: ${count.currencies.map(t => t[1] + "fr").join(" ")}`).bg-white.fc-black-400.fs-fine.lh-xxl
          each c in count.currencies
            .s-progress--bar.wmn-initial(title=`bought from ${c[1]} labels with ${c[0]}` class=`fc-${palette[i]}-400 bg-${palette[i++]}-400`)
              - if (i >= palette.length) i = 0
              if c[1] / totalLabels >= 0.08
                = c[0]
              else if c[1] / totalLabels >= 0.06
                = c[0].slice(0, 2)
              else
                = c[0][0]