- function kb(v) { return v != null ? (v/1024).toFixed(1)+' KB' : '—'; }
- function num(v) { return v != null ? v : '—'; }

div(class='bg-white border border-gray-200 rounded-xl p-5')
  h2(class='text-base font-semibold mb-4') Resources
  div(class='grid grid-cols-1 md:grid-cols-2 gap-6')
    div
      h3(class='text-xs font-semibold text-gray-400 uppercase mb-2') Transfer Size
      table(class='w-full text-sm')
        tbody
          each row in [['Total', job.transfer_total], ['HTML', job.transfer_html], ['JavaScript', job.transfer_js], ['CSS', job.transfer_css], ['Images', job.transfer_image], ['Fonts', job.transfer_font]]
            tr(class='border-b border-gray-100')
              td(class='py-1.5 text-gray-500')= row[0]
              td(class='py-1.5 text-right font-medium')= kb(row[1])
          tr(class='border-t border-gray-200')
            td(class='py-1.5 text-gray-500') Third-party
            td(class='py-1.5 text-right font-medium')= kb(job.third_party_transfer)
    div
      h3(class='text-xs font-semibold text-gray-400 uppercase mb-2') Request Counts
      table(class='w-full text-sm')
        tbody
          each row in [['Total requests', job.requests_total], ['JavaScript', job.requests_js], ['CSS', job.requests_css], ['Images', job.requests_image], ['Fonts', job.requests_font], ['Third-party', job.third_party_requests]]
            tr(class='border-b border-gray-100')
              td(class='py-1.5 text-gray-500')= row[0]
              td(class='py-1.5 text-right font-medium')= num(row[1])