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='{{Items.eggs[egg].notes}}', popover-title='{{Items.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 {{Items.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='{{Items.hatchingPotions[pot].notes}}', popover-title='{{Items.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='{{Items.food[food].notes}}', popover-title='{{Items.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}}

    .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 Items.eggs')
                button.customize-option(popover='{{egg.notes}}', popover-title='{{egg.text}} Egg', popover-trigger='mouseenter', popover-placement='left', ng-click='buy("egg", 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 Items.hatchingPotions')
                button.customize-option(popover='{{pot.notes}}', popover-title='{{pot.text}} Potion', popover-trigger='mouseenter', popover-placement='left', ng-click='buy("hatchingPotion", 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 Items.food')
                button.customize-option(popover='{{food.notes}}', popover-title='{{food.text}}', popover-trigger='mouseenter', popover-placement='left', ng-click='buy("food", food)', class='Pet_Food_{{food.name}}')
                p
                  |  {{food.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