#app-header.row
avatar#header-avatar(:user="user")
div
span.character-name {{user.profile.name}}
span.character-level Lvl {{user.stats.lvl}}
.progress-container.d-flex
img.icon(src="~assets/header/png/health@3x.png")
.progress
.progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, MAX_HEALTH)}%`}")
span {{user.stats.hp | round}} / {{MAX_HEALTH}}
.progress-container.d-flex
img.icon(src="~assets/header/png/experience@3x.png")
.progress
.progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
span {{user.stats.exp | round}} / {{toNextLevel}}
.progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
img.icon(src="~assets/header/png/magic@3x.png")
.progress
.progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
span {{user.stats.mp | round}} / {{maxMP}}