.member-details(
:class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }",
@click='showMemberModal(member)'
)
div(:class="{ 'col-4': !isHeader }")
avatar(
:member="member",
@click.native="$emit('click')",
@mouseover.native="$emit('onHover')",
@mouseout.native="$emit('onHover')",
:hide-class-badge="classBadgePosition !== 'under-avatar'",
)
.member-stats(:class="{'col-8': !expanded && !isHeader}")
.d-flex.align-items-center
class-badge(v-if="classBadgePosition === 'next-to-name'", :member-class="member.stats.class")
.d-flex.flex-column.profile-name-character
h3.character-name
| {{member.profile.name}}
.is-buffed(v-if="isBuffed", v-b-tooltip.hover.bottom="$t('buffed')")
.svg-icon(v-html="icons.buff")
.small-text.character-level
span.mr-1(v-if="member.auth && member.auth.local && member.auth.local.username") @{{ member.auth.local.username }}
span.mr-1(v-if="member.auth && member.auth.local && member.auth.local.username") •
span {{ characterLevel }}
.progress-container(v-b-tooltip.hover.bottom="$t('health')")
.svg-icon(v-html="icons.health")
.progress
.progress-bar.bg-health(:style="{width: `${percent(member.stats.hp, MAX_HEALTH)}%`}")
span.small-text {{member.stats.hp | statFloor}} / {{MAX_HEALTH}}
.progress-container(v-b-tooltip.hover.bottom="$t('experience')")
.svg-icon(v-html="icons.experience")
.progress
.progress-bar.bg-experience(:style="{width: `${percent(member.stats.exp, toNextLevel)}%`}")
span.small-text {{member.stats.exp | statFloor}} / {{toNextLevel}}
.progress-container(v-if="hasClass", v-b-tooltip.hover.bottom="$t('mana')")
.svg-icon(v-html="icons.mana")
.progress
.progress-bar.bg-mana(:style="{width: `${percent(member.stats.mp, maxMP)}%`}")
span.small-text {{member.stats.mp | statFloor}} / {{maxMP}}