mixin npcCircleAttribute(name,attrName,i18n)
  .overlay-content
    div(class=attrName || name).circle.basic-border.ratio1-1
    +input-label({
      inputObj:{type:'number',name:attrName || name},
      spanObj:{'data-i18n':i18n || `${name} abbreviation`,role:'heading','aria-level':3},
      divObj:{class:`stacked center no-gap overlaid-content`}
    })

section#npc-stats.tiny-gap.npc-separator
  .attributes.flex-box.half-gap.justify-space-around.flex-wrap
    each name in attributes
      +attributeHolder(name)
  .armor-movement.flex-box.half-gap.justify-space-around.flex-wrap
    each name in ['health','resolve']
      +npcCircleAttribute(name,`${name} max`,name)
    each obj in [...movementArmor,{name:'adrenaline'}]
      +npcCircleAttribute(obj.name)
  .characteristics.half-gap.justify-space-between
    each obj,name in characteristics
      +input-label({
        inputObj:{name,type:'number',class:'underlined'},
        spanObj:{'data-i18n':`${name}-abbreviation`,role:'heading','aria-level':3},
        divObj:{class:'no-gap'}
      })