mixin petList(source)
  menu.pets(type='list')
    each egg in source
      li.customize-menu
        menu
          each potion in env.Content.hatchingPotions
            - pet = egg.key+"-"+potion.key
            div(popover-trigger='mouseenter', popover=env.t('petName', {potion: potion.text(env.language.code), egg: egg.text(env.language.code)}), popover-placement='bottom')
              button(class="pet-button Pet-#{pet}", ng-if='user.items.pets["#{pet}"]>0', ng-class='{active: user.items.currentPet == "#{pet}", selectableInventory: #{!egg.noMount} && selectedFood && !user.items.mounts["#{pet}"]}', ng-click='choosePet("#{egg.key}", "#{potion.key}")')
                .progress(ng-show='!user.items.mounts["#{pet}"]')
                  .progress-bar.progress-bar-success(ng-style='{width: user.items.pets["#{pet}"]/.5 + "%"}')
              button(class="pet-button pet-not-owned", ng-if='!user.items.pets["#{pet}"]')
                .PixelPaw
              button(class="pet-evolved pet-button Pet-#{pet}", ng-if='user.items.pets["#{pet}"]<0')

.container-fluid
  .stable.row: .col-xs-12
    .pull-left-sm.col-centered(class="#{env.worldDmg.stables ? 'npc_matt_broken' : 'npc_matt'}")
    .popover.static-popover.fade.right.in.pull-left-sm.col-centered
      .arrow.hidden-xs
      h3.popover-title
        a(target='_blank', href='http://www.kickstarter.com/profile/mattboch')=env.t('mattBoch')
      .popover-content
        p=env.t('mattBochText1')
        h4 {{:: env.t('stableBeastMasterProgress', { number: beastMasterProgress }) }}
  .row: .col-md-12
    +petList(env.Content.dropEggs)
  .row: .col-md-12
    h4=env.t('questPets')
    +petList(env.Content.questEggs)

  .row: .col-md-12
    h4=env.t('rarePets')
    menu
      div
        each t,k in env.Content.specialPets
          - var egg = k.split('-')[0], pot = k.split('-')[1]
          button(ng-if='user.items.pets["#{egg}-#{pot}"]', class="pet-button Pet-#{egg}-#{pot}", ng-class='{active: user.items.currentPet == "#{egg}-#{pot}"}', ng-click='choosePet("#{egg}", "#{pot}")', popover=env.t(t), popover-trigger='mouseenter', popover-placement='bottom')
        a(target='_blank', href='http://habitrpg.wikia.com/wiki/Contributing_to_HabitRPG')
          button(ng-if='!user.items.pets["Dragon-Hydra"]', class="pet-button pet-not-owned", popover-trigger='mouseenter', popover-placement='right', popover=env.t('rarePetPop1'), popover-title=env.t('rarePetPop2'))
            .PixelPaw-Gold

  .well.food-tray
    p(ng-show='foodCount < 1')=env.t('noFood')
    menu.inventory-list(type='list', ng-if='foodCount > 0')
      li.customize-menu
        menu.pets-menu(label=env.t('food'))
          div(ng-repeat='(food,points) in ownedItems(user.items.food)')
            button.customize-option(popover-append-to-body='true', popover='{{:: Content.food[food].notes()}}', popover-title='{{:: Content.food[food].text()}}', popover-trigger='mouseenter', popover-placement='top', ng-click='chooseFood(food)', ng-class='{selectableInventory: selectedFood == Content.food[food]}', class='Pet_Food_{{::food}}')
              .badge.badge-info.stack-count {{points}}
            // Remove this once we have images in
            p {{:: Content.food[food].text()}}