habitica-self-host/views/options/inventory/stable.jade

script(type='text/ng-template', id='partials/options.inventory.stable.html')
  .stable(ng-controller='PetsCtrl')
    .NPC-Matt
      .popover.static-popover.fade.right.in(style='max-width: 550px; margin-left: 10px;')
        .arrow
        h3.popover-title
          a(target='_blank', href='http://www.kickstarter.com/profile/mattboch') Matt Boch
        .popover-content
          p
            | Welcome to the Stable! I'm Matt, the beast master. Choose a pet here to adventure at your side - they aren't much help yet, but I forsee a time when they're able to
            a(href='https://trello.com/card/mounts/50e5d3684fe3a7266b0036d6/221')  grow into powerful steeds
            | ! Until that day,
            a(target='_blank', href='https://f.cloud.github.com/assets/2374703/164631/3ed5fa6c-78cd-11e2-8743-f65ac477b55e.png') have a look-see
            |  at all the pets you can collect.
          h4 {{userPets.length}} / {{totalPets}} Pets Found

    menu.pets(type='list')
      li.customize-menu(ng-repeat='pet in pets')
        menu
          div(ng-repeat='potion in hatchingPotions', tooltip='{{potion.name}} {{pet.name}}')
            button(class="pet-button Pet-{{pet.name}}-{{potion.name}}", ng-show='hasPet(pet.name, potion.name)', ng-class="{active: isCurrentPet(pet.name, potion.name)}", ng-click='choosePet(pet.name, potion.name)')
            button(class="pet-button pet-not-owned", ng-hide='hasPet(pet.name, potion.name)')
              img(src='/bower_components/habitrpg-shared/img/PixelPaw.png')

    h4 Rare Pets
    menu
      div
        button(ng-if='hasPet("Wolf", "Veteran")', class="pet-button Pet-Wolf-Veteran", ng-class='{active: isCurrentPet("Wolf", "Veteran")}', ng-click='choosePet("Wolf", "Veteran")', tooltip='Veteran Wolf')
        button(ng-if='hasPet("Wolf", "Cerberus")', class="pet-button Pet-Wolf-Cerberus", ng-class='{active: isCurrentPet("Wolf", "Cerberus")}', ng-click='choosePet("Wolf", "Cerberus")', tooltip='Cerberus Pup')
        button(ng-if='hasPet("Dragon", "Hydra")', class="pet-button Pet-Dragon-Hydra", ng-class='{active: isCurrentPet("Dragon", "Hydra")}', ng-click='choosePet("Dragon", "Hydra")', tooltip='Hydra Pet')
        a(target='_blank', href='https://github.com/HabitRPG/habitrpg/wiki/Contributing')
          button(ng-if='!hasPet("Dragon", "Hydra")', class="pet-button pet-not-owned", popover-trigger='mouseenter', popover-placement='right', popover="Click the gold paw to learn more about how you can obtain this rare pet through contributing to HabitRPG!", popover-title='How to Get this Pet!')
            img(src='/bower_components/habitrpg-shared/img/PixelPaw-Gold.png')