speedboard/views/partials/scorecard.pug

- function scoreBg(s) { return s == null ? 'bg-gray-100 text-gray-400' : s >= 90 ? 'bg-green-100 text-green-700' : s >= 50 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'; }
- const scores = [['Overall', job.score_overall], ['Perf', job.score_performance], ['Best Practice', job.score_bestpractice], ['Privacy', job.score_privacy]]

div(class='bg-white border border-gray-200 rounded-xl p-4 h-full')
  h2(class='text-sm font-semibold mb-3 text-gray-600 uppercase tracking-wide') Coach Scores
  div(class='flex flex-wrap gap-3 justify-start')
    each item in scores
      div(class='flex flex-col items-center gap-1')
        div(class=`score-circle w-12 h-12 text-base ${scoreBg(item[1])}`)
          = item[1] != null ? Math.round(item[1]) : '?'
        span(class='text-xs text-gray-500 text-center')= item[0]