habitica-self-host/website/views/options/inventory/mounts.jade

mixin mountList(eggSource, potionSource)
  menu.pets(type='list')
    each egg in eggSource
      -if(!egg.noMount) {
        li.customize-menu
          menu
            each potion in potionSource
              - mount = egg.key+"-"+potion.key
              div(popover-trigger='mouseenter', popover=env.t('mountName', {potion: potion.text(env.language.code), mount: egg.mountText(env.language.code)}), popover-placement='bottom')
                button(class="pet-button Mount_Icon_#{mount}", ng-show='user.items.mounts["#{mount}"]', ng-class='{active: user.items.currentMount == "#{mount}"}', ng-click='chooseMount("#{egg.key}", "#{potion.key}")')
                button(class="pet-button mount-not-owned", ng-if='!user.items.mounts["#{mount}"] && (#{potion.canBuy()} || user.items.hatchingPotions["#{potion.key}"] || user.items.pets["#{mount}"])')
                  .PixelPaw
      -}

.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('mattShall', {name: "{{user.profile.name}}"})
        h4 {{:: env.t('stableMountMasterProgress', { number: mountMasterProgress }) }}
  .row: .col-md-12
    +mountList(env.Content.dropEggs,env.Content.dropHatchingPotions)

  .row: .col-md-12
    h4=env.t('magicMounts')
    menu.pets(type='list')
      each potion in env.Content.premiumHatchingPotions
        li.customize-menu
          menu
            each egg in env.Content.dropEggs
              - mount = egg.key+"-"+potion.key
              div(popover-trigger='mouseenter', popover=env.t('mountName', {potion: potion.text(env.language.code), mount: egg.mountText(env.language.code)}), popover-placement='bottom')
                button(class="pet-button Mount_Icon_#{mount}", ng-show='user.items.mounts["#{mount}"]', ng-class='{active: user.items.currentMount == "#{mount}"}', ng-click='chooseMount("#{egg.key}", "#{potion.key}")')
                button(class="pet-button mount-not-owned", ng-if='!user.items.mounts["#{mount}"] && (#{potion.canBuy()} || user.items.hatchingPotions["#{potion.key}"] || user.items.pets["#{mount}"])')
                  .PixelPaw
  .row: .col-md-12
    h4=env.t('questMounts')
    +mountList(env.Content.questEggs,env.Content.dropHatchingPotions)
  .row: .col-md-12
    h4=env.t('rareMounts')
    menu
      div
        each t,k in env.Content.specialMounts
          - var animal = k.split('-')[0], color = k.split('-')[1]
          button(ng-if='user.items.mounts["#{animal}-#{color}"]', class="pet-button Mount_Icon_#{animal}-#{color}", ng-class='{active: user.items.currentMount == "#{animal}-#{color}"}', ng-click='chooseMount("#{animal}", "#{color}")', popover=env.t(t), popover-trigger='mouseenter', popover-placement='bottom')