renderTpl(response, "/ui/report.html", new Transformer {
  $("img")(modifyAttr("src", "/new/" + _))
  $("script")(modifyAttr("src", "/new/" + _))
  $("link")(modifyAttr("href", "/new/" + _))

  $("#proximity ul li:not(:first-child)") { _ => Nil }
  $("#proximity ul li") { node =>
    prox.flatMap { case (name, value) => new Transform(node) {
      $(":first-child").contents = name
      $(":last-child").contents = value.toString
    }}
  }

  $("#score") { node =>
    // templates for individual types of report items
    val twFollowers = node.$("#twitter-followers.item")
    val fbFriends = node.$("#facebook-friends.item")
    val otherLenders = node.$("#other-lenders.item")
    val deceptionFraud = node.$("#deception-fraud.item")
    val conscientiousnessRating = node.$("#conscientiousness.item")
    val genericItem = node.$(".generic.item")

    def renderItem(item: ReportItem): NodeSeq = new Transform(genericItem) {
      $(".value").contents = item.score.toString
      $(".text").contents = item.gloss
    }

    val itemsBySeverity = reportItems.sortBy(_.level).groupBy(_.level).withDefaultValue(Nil)

    new Transform(node) {
      for (severity <- List(Supportive, Mild, Serious); colNum <- List(0, 1))
        $(s"#${severity.toString.toLowerCase} > div:nth-child(${colNum + 2})").contents =
          column(colNum, itemsBySeverity(severity)).take(3).flatMap(renderItem)
    }
  }

  $("#wordcloud") { _ => Nil }
})