#app-header.row
avatar#header-avatar(:user="$store.state.user")
.eight.wide.column
span.character-name {{user.profile.name}}
span.character-level Lvl {{user.stats.lvl}}
.progress-container
img.icon(src="~assets/header/png/health@3x.png")
.ui.progress.red
.bar(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
span {{user.stats.hp | round}} / {{maxHealth}}
.progress-container
img.icon(src="~assets/header/png/experience@3x.png")
.ui.progress.yellow
.bar(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
span {{user.stats.exp | round}} / {{toNextLevel}}
.progress-container(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
img.icon(src="~assets/header/png/magic@3x.png")
.ui.progress.blue
.bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
span {{user.stats.mp | round}} / {{maxMP}}