mixin orderByButton
  mixin choice(attr)
    li(ng-class="{ 'active': orderChoice === '#{attr}' }")
      a(ng-click="setOrder('#{attr}')")=env.t(attr)

  .btn-group
    button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown')
      | {{env.t("orderBy", { item: env.t(orderChoice) })}} #[span.caret]
    ul.dropdown-menu
      - each attr in ["set"]
        +choice(attr)
      li.divider(role="separator")
      - each attr in ["constitution", "intelligence", "perception", "strength"]
        +choice(attr)

mixin groupingButton
  .btn-group
    button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown', ng-init='setGrouping("klass")')
      | {{env.t('groupBy', { type: env.t(groupingChoice) })}} #[span.caret]
    ul.dropdown-menu
      - each grouping in ["klass", "equipmentType"]
          li(ng-class="{ 'active': groupingChoice === '#{grouping}' }")
            a(ng-click="setGrouping('#{grouping}')")=env.t(grouping)

mixin equipmentButton(type)
      button.customize-option(class='shop_{{::item.key}}',
        ng-class='{selectableInventory: user.items.gear.#{type}[item.type] == item.key}',
        ng-click='equip(item.key, "#{type}")',
        popover='{{::item.notes()}} {{::classBonusNotes(item)}}', popover-title='{{::item.text()}}',
        popover-trigger='mouseenter', popover-placement='right',
        popover-append-to-body='true')

mixin equipmentList(equipmentType)
  menu.pets-menu(label='{{::label}}', ng-show='filteredGearByClass[klass]', ng-if='groupingChoice === "klass"',
    ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
    div(ng-repeat='item in filteredGearByClass[klass] | orderBy: order')
      +equipmentButton(equipmentType)
  menu.pets-menu(label='{{::label}}', ng-show='filteredGearByType[type]', ng-if='groupingChoice === "equipmentType"',
    ng-repeat='(type,label) in {headAccessory:env.t("headAccessoryCapitalized"), head:env.t("headgearCapitalized"), eyewear:env.t("eyewear"), weapon:env.t("weaponCapitalized"), shield:env.t("offhandCapitalized"), armor:env.t("armorCapitalized"), body:env.t("body"), back:env.t("back")}')
    div(ng-repeat='item in filteredGearByType[type] | orderBy: order', ng-show='item.klass !== "base"')
      +equipmentButton(equipmentType)

.container-fluid
  .row
    .col-md-6
      .input-group.equipment-search
        .input-group-addon
          .glyphicon.glyphicon-search
        input.form-control(type='text', placeholder=env.t('search'), ng-model='equipmentQuery.query', ng-model-options='{ debounce: 250 }')
  .row
    .col-md-6.border-right(ng-controller="SortableInventoryController")
      h3.equipment-title.hint(popover-trigger='mouseenter',
        popover-placement='right', popover-append-to-body='true',
        popover=env.t('battleGearText'))=env.t('battleGear')

      .checkbox.equipment-title
        label
          input(type="checkbox", ng-model="user.preferences.autoEquip",
            ng-change='set({"preferences.autoEquip":user.preferences.autoEquip ? true : false})')
          |  
          =env.t('autoEquipBattleGear')

      .btn-toolbar
        .btn-group
          button.btn.btn-default(type="button", ng-click='dequip("battleGear");') {{env.t("unequipBattleGear")}}

      br

      .btn-toolbar
        +groupingButton
        +orderByButton

      li.customize-menu.inventory-gear
        +equipmentList("equipped")

    .col-md-6(ng-controller="SortableInventoryController")
      h3.equipment-title.hint(popover-trigger='mouseenter',
        popover-placement='right', popover-append-to-body='true',
        popover=env.t('costumeText'))=env.t('costume')

      .checkbox.equipment-title
        label
          input(type="checkbox", ng-model="user.preferences.costume",
            ng-change='set({"preferences.costume":user.preferences.costume ? true : false})')
          |  
          =env.t('useCostume')

      .btn-toolbar
        .btn-group
          button.btn.btn-default(type="button", ng-click='dequip("costume");') {{env.t("unequipCostume")}}
          button.btn.btn-default(type="button", ng-click='dequip("petMountBackground");') {{env.t("unequipPetMountBackground")}}

      br

      .btn-toolbar(ng-if='user.preferences.costume')
        +groupingButton
        +orderByButton

      li.customize-menu(ng-if='!user.preferences.costume')
        .well.use-costume-info
          p=env.t('useCostumeInfo1')
          p(ng-if='showUseCostumeInfo')!=env.t('useCostumeInfo2')
          p: a(ng-click='showUseCostumeInfo = !showUseCostumeInfo') {{!showUseCostumeInfo ? env.t('showMoreMore') : env.t('showMoreLess')}}

      li.customize-menu(ng-if='user.preferences.costume')
        +equipmentList("costume")