.d-flex
avatar#header-avatar(:user="user")
div
h3.character-name
| {{user.profile.name}}
.is-buffed(v-if="isBuffed")
.svg-icon(v-html="icons.buff")
span.small-text.character-level {{ characterLevel }}
.progress-container.d-flex
.svg-icon(v-html="icons.health")
.progress
.progress-bar.bg-health(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
span.small-text {{user.stats.hp | round}} / {{MAX_HEALTH}}
.progress-container.d-flex
.svg-icon(v-html="icons.experience")
.progress
.progress-bar.bg-experience(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
span.small-text {{user.stats.exp | round}} / {{toNextLevel}}
.progress-container.d-flex(v-if="user.flags.classSelected && !user.preferences.disableClasses")
.svg-icon(v-html="icons.mana")
.progress
.progress-bar.bg-mana(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
span.small-text {{user.stats.mp | round}} / {{maxMP}}