habitica/views/options/inventory/inventory.jade

script(type='text/ng-template', id='partials/options.inventory.inventory.html')
  .row-fluid
    .span6.border-right
      h2 Inventory
      p.well Click an egg to see usable potions highlighted in green and then click one of the highlighted potions to hatch your pet. If no potions are highlighted, click that egg again to deselect it, and instead click a potion first to have the usable eggs highlighted. You can also sell unwanted drops to Alexander the Merchant.
      menu.inventory-list(type='list')

        li.customize-menu
          menu.pets-menu(label='Eggs ({{eggCount}})')
            p(ng-show='eggCount < 1') You don't have any eggs.
            div(ng-repeat='(egg,points) in ownedItems(user.items.eggs)')
              //TODO move positioning this styling to css
              button.customize-option(popover='{{Content.eggs[egg].notes}}', popover-title='{{Content.eggs[egg].text}} Egg', popover-trigger='mouseenter', popover-placement='right', ng-click='chooseEgg(egg)', class='Pet_Egg_{{egg}}', ng-class='{selectableInventory: selectedPotion && !user.items.pets[egg+"-"+selectedPotion.name]}')
                .badge.badge-info.stack-count {{points}}
              //-p {{Content.eggs[egg].text}}

        li.customize-menu
          menu.hatchingPotion-menu(label='Hatching Potions ({{potCount}})')
            p(ng-show='potCount < 1') You don't have any hatching potions.
            div(ng-repeat='(pot,points) in ownedItems(user.items.hatchingPotions)')
              button.customize-option(popover='{{Content.hatchingPotions[pot].notes}}', popover-title='{{Content.hatchingPotions[pot].text}} Potion', popover-trigger='mouseenter', popover-placement='right', ng-click='choosePotion(pot)', class='Pet_HatchingPotion_{{pot}}', ng-class='{selectableInventory: selectedEgg && !user.items.pets[selectedEgg.name+"-"+pot]}')
                .badge.badge-info.stack-count {{points}}
              //-p {{pot}}

        li.customize-menu
          menu.pets-menu(label='Food ({{foodCount}})')
            p(ng-show='foodCount < 1') You don't have any food.
            div(ng-repeat='(food,points) in ownedItems(user.items.food)')
              button.customize-option(popover='{{Content.food[food].notes}}', popover-title='{{Content.food[food].text}}', popover-trigger='mouseenter', popover-placement='right', ng-click='chooseFood(food)', class='Pet_Food_{{food}}')
                .badge.badge-info.stack-count {{points}}
              //-p {{food}}

        hr

        h4 Gear
        li.customize-menu.inventory-gear
          menu.pets-menu(label='{{label}}', ng-repeat='(klass,label) in {base:"Base", warrior:"Warrior", wizard:"Wizard", rogue:"Rogue", healer:"Healer", special:"Special"}', ng-show='gear[klass]')
            div(ng-repeat='item in gear[klass]')
              button.customize-option(popover='{{item.notes}}', popover-title='{{item.text}}', popover-trigger='mouseenter', popover-placement='right', ng-click='user.ops.equip({params:{key:item.key}})', class='shop_{{item.key}}', ng-class='{selectableInventory: user.items.gear.equipped[item.type] == item.key}')
        label.checkbox.inline
          input(type="checkbox", ng-model="user.preferences.costume", ng-click='set({"preferences.costume":!user.preferences.costume})')
          | Use Costume&nbsp;
          i.icon-question-sign(popover="Show something different on your avatar than the gear you have equipped for battle", popover-trigger='mouseenter', popover-placement='right')
        li.customize-menu(ng-if='user.preferences.costume')
          menu.pets-menu(label='{{label}}', ng-repeat='(klass,label) in {base:"Base", warrior:"Warrior", wizard:"Wizard", rogue:"Rogue", healer:"Healer", special:"Special"}', ng-show='gear[klass]')
            div(ng-repeat='item in gear[klass]')
              button.customize-option(popover='{{item.notes}}', popover-title='{{item.text}}', popover-trigger='mouseenter', popover-placement='right', ng-click='user.ops.equip({params:{type:"costume", key:item.key}})', class='shop_{{item.key}}', ng-class='{selectableInventory: user.items.gear.costume[item.type] == item.key}')

    .span6
      h2 Market
      .row-fluid
        table.npc_alex_container
          tr
            td
              .npc_alex.pull-left
            td
              .popover.static-popover.fade.right.in
                .arrow
                h3.popover-title
                  a(target='_blank', href='http://www.kickstarter.com/profile/523661924') Alexander the Merchant
                .popover-content
                  p
                    | Welcome to the Market! Buy hard-to-find eggs and potions! Sell your extras! Commission useful services! Come see what we have to offer.
                  p
                    button.btn.btn-primary(ng-show='selectedEgg', ng-click='sellInventory()')
                      | Sell {{selectedEgg.name}} for {{selectedEgg.value}} Gold
                    button.btn.btn-primary(ng-show='selectedPotion', ng-click='sellInventory()')
                      | Sell {{selectedPotion.name}} for {{selectedPotion.value}} Gold
                    button.btn.btn-primary(ng-show='selectedFood', ng-click='sellInventory()')
                      | Sell {{selectedFood.name}} for {{selectedFood.value}} Gold

        menu.inventory-list(type='list')
          li.customize-menu
            menu.pets-menu(label='Eggs')
              div(ng-repeat='egg in Content.eggs')
                button.customize-option(popover='{{egg.notes}}', popover-title='{{egg.text}} Egg', popover-trigger='mouseenter', popover-placement='left', ng-click='purchase("eggs", egg)', class='Pet_Egg_{{egg.name}}')
                p
                  |  {{egg.value}}
                  span.Pet_Currency_Gem1x.inline-gems

          li.customize-menu
            menu.pets-menu(label='Hatching Potions')
              div(ng-repeat='pot in Content.hatchingPotions')
                button.customize-option(popover='{{pot.notes}}', popover-title='{{pot.text}} Potion', popover-trigger='mouseenter', popover-placement='left', ng-click='purchase("hatchingPotions", pot)', class='Pet_HatchingPotion_{{pot.name}}')
                p
                  |  {{pot.value}}
                  span.Pet_Currency_Gem1x.inline-gems

          li.customize-menu
            menu.pets-menu(label='Food')
              div(ng-repeat='food in Content.food', ng-show='food.name !== "Saddle"')
                button.customize-option(popover='{{food.notes}}', popover-title='{{food.text}}', popover-trigger='mouseenter', popover-placement='left', ng-click='purchase("food", food)', class='Pet_Food_{{food.name}}')
                p
                  |  {{food.value}}
                  span.Pet_Currency_Gem1x.inline-gems
            menu.pets-menu(label='Saddle')
              div
                button.customize-option(popover='{{Content.food.Saddle.notes}}', popover-title='{{Content.food.Saddle.text}}', popover-trigger='mouseenter', popover-placement='left', ng-click='purchase("food", Content.food.Saddle)', class='Pet_Food_{{Content.food.Saddle.name}}')
                p
                  |  {{Content.food.Saddle.value}}
                  span.Pet_Currency_Gem1x.inline-gems

          li.customize-menu
            menu.pets-menu(label='Services')
              div
                // Once grunt-spritesmith is merged, let's use https://github.com/browserquest/BrowserQuest/blob/master/client/img/1/item-firepotion.png
                button.btn(popover='Return all tasks to neutral value (yellow color).', popover-title=env.t('rerollName'), popover-trigger='mouseenter', popover-placement='left', ng-click='modals.reroll = true')
                  | Fortify 4
                  span.Pet_Currency_Gem1x.inline-gems