div
.item-wrapper(@click="click()", :id="itemId")
.item.pet-slot(
:class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
)
slot(name="itemBadge", :item="item")
span.item-content.hatchAgain(v-if="mountOwned && isHatchable")
span.egg(:class="eggClass")
span.potion(:class="potionClass")
span.item-content(v-else, :class="getPetItemClass(item)")
span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
span.item-label(v-if="label") {{ label }}
b-popover(
:target="itemId",
:triggers="showPopover ? 'hover' : ''",
:placement="popoverPosition",
)
div.hatchablePopover(v-if="item.isHatchable()")
h4.popover-content-title {{ item.name }}
div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
div.potionEggGroup
div.potionEggBackground
div(:class="potionClass")
div.potionEggBackground
div(:class="eggClass")
div(v-else)
h4.popover-content-title {{ item.name }}