script(type='text/ng-template', id='modals/chooseClass.html')  
  .modal-header
    h3=env.t('chooseClass1')
      a(href='http://habitrpg.wikia.com/wiki/Class_System' target='_blank')=env.t('chooseClass2')
  .modal-body.select-class
    .row-fluid
      .span3(ng-click='selectedClass = "warrior"')
        h5
          a(href='http://habitrpg.wikia.com/wiki/Warrior' target='_blank')=env.t('warrior')
        figure.herobox(ng-class='{"selected-class": selectedClass=="warrior"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_warrior_5')
            span(class='head_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_warrior_5')
            span(class='shield_warrior_5')
            span(class='weapon_warrior_6')
      .span3(ng-click='selectedClass = "wizard"')
        h5
          a(href='http://habitrpg.wikia.com/wiki/Mage' target='_blank')=env.t('mage')
        figure.herobox(ng-class='{"selected-class": selectedClass=="wizard"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_wizard_5')
            span(class='head_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_wizard_5')
            span(class='shield_wizard_5')
            span(class='weapon_wizard_6')
      .span3(ng-click='selectedClass = "rogue"')
        h5
          a(href='http://habitrpg.wikia.com/wiki/Rogue' target='_blank')=env.t('rogue')
        figure.herobox(ng-class='{"selected-class": selectedClass=="rogue"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_rogue_5')
            span(class='head_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_rogue_5')
            span(class='shield_rogue_6')
            span(class='weapon_rogue_6')
      .span3(ng-click='selectedClass = "healer"')
        h5
          a(href='http://habitrpg.wikia.com/wiki/Healer' target='_blank')=env.t('healer')
        figure.herobox(ng-class='{"selected-class": selectedClass=="healer"}')
          .character-sprites
            span(class='skin_{{user.preferences.skin}}')
            span(class='{{user.preferences.size}}_armor_healer_5')
            span(class='head_0')
            span(class='hair_base_{{user.preferences.hair.base}}_{{user.preferences.hair.color}}')
            span(class='hair_bangs_{{user.preferences.hair.bangs}}_{{user.preferences.hair.color}}')
            span(class='hair_beard_{{user.preferences.hair.beard}}_{{user.preferences.hair.color}}')
            span(class='hair_mustache_{{user.preferences.hair.mustache}}_{{user.preferences.hair.color}}')
            span(class='head_healer_5')
            span(class='shield_healer_5')
            span(class='weapon_healer_6')
    br
    .well(ng-show='selectedClass=="warrior"')=env.t('warriorText')
    .well(ng-show='selectedClass=="wizard"')=env.t('mageText')
    .well(ng-show='selectedClass=="rogue"')=env.t('rogueText')
    .well(ng-show='selectedClass=="healer"')=env.t('healerText')

  .modal-footer
    button.btn.btn-small.btn-danger.cancel(ng-click='user.ops.disableClasses({}); $close()', popover-placement='top', popover-trigger='mouseenter', popover=env.t('optOutText'))=env.t('optOut')
    button.btn.btn-primary.cancel(ng-disabled='!selectedClass' ng-click='changeClass(selectedClass); $close()')=env.t('select')