b-modal#choose-class(
size='lg',
:hide-header='true',
:hide-footer='true',
:no-close-on-esc='true',
:no-close-on-backdrop='true',
)
.modal-body.select-class
h1.header-purple.text-center {{ $t('chooseClass') }}
.container-fluid
br
.row
.col-md-3(v-for='heroClass in classes')
div(@click='selectedClass = heroClass')
avatar(
:member='user',
:avatarOnly='true',
:withBackground='false',
:overrideAvatarGear='classGear(heroClass)',
:hideClassBadge='true',
:spritesMargin='"1.8em 1.5em"',
:overrideTopPadding='"0px"',
:class='selectionBox(selectedClass, heroClass)',
)
br
.d-flex.justify-content-center(v-for='heroClass in classes')
.d-inline-flex(v-if='selectedClass === heroClass')
.class-badge.d-flex.justify-content-center
.svg-icon.align-self-center(v-html='icons[heroClass]')
.class-name(:class='`${heroClass}-color`') {{ $t(heroClass) }}
div(v-for='heroClass in classes')
.class-explanation.text-center(v-if='selectedClass === heroClass') {{ $t(`${heroClass}Text`) }}
.text-center(v-markdown='$t("chooseClassLearnMarkdown")')
.modal-actions.text-center
button.btn.btn-primary.d-inline-block(v-if='!selectedClass', :disabled='true') {{ $t('select') }}
button.btn.btn-primary.d-inline-block(v-else, @click='clickSelectClass(selectedClass); close();') {{ $t('selectClass', {heroClass: $t(selectedClass)}) }}
.opt-out-wrapper
span#classOptOutBtn.danger(@click='clickDisableClasses(); close();') {{ $t('optOutOfClasses') }}
span.opt-out-description {{ $t('optOutOfClassesText') }}