style("text/css").
    table {
        border-collapse: collapse;
        position: relative;
        text-align: left;
    }
    tr.gray th {
        background: lightgray;
    }
    th, td {
        padding: 2px;
    }
    th {
        position: sticky;
        top: 0;
    }

table
    tr(class="gray")
        th Name
        th Slots
        th Ability Score
        th Modifier
        th Classes
        th Book
    - let processedNonWeaponProfs = new Set()
    - let keys = Object.keys(data).sort()
    each key in keys
        - let nonWeaponProfList = data[key]
        if processedNonWeaponProfs.has(nonWeaponProfList)
            - continue
        - processedNonWeaponProfs.add(nonWeaponProfList)
        - let slotsColor        = nonWeaponProfList.every( (ele,i,arr) => ele.slots === arr[0].slots) ? "white" : "orange"
        - let abilityScoreColor = nonWeaponProfList.every( (ele,i,arr) => ele.abilityScore === arr[0].abilityScore) ? "white" : "orange"
        - let modifierColor     = nonWeaponProfList.every( (ele,i,arr) => ele.modifier === arr[0].modifier) ? "white" : "orange"
        - let classesColor      = nonWeaponProfList.every( (ele,i,arr) => ele.classes === arr[0].classes) ? "white" : "orange"
        each nonWeaponProf in nonWeaponProfList
            - let modifier =  nonWeaponProf.modifier > 0 ? '+'+nonWeaponProf.modifier : nonWeaponProf.modifier
            each book in nonWeaponProf.book
                tr
                    td #{key}
                    td(style=`background-color:${slotsColor}`) #{nonWeaponProf.slots}
                    td(style=`background-color:${abilityScoreColor}`) #{nonWeaponProf.abilityScore}
                    td(style=`background-color:${modifierColor}`) #{modifier}
                    td(style=`background-color:${classesColor}`) #{nonWeaponProf.classes}
                    td #{book}
        tr
            td