b-modal#hatching-modal()
div.content(v-if="hatchablePet")
div.potionEggGroup
div.potionEggBackground
div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
div.potionEggBackground
div(:class="'Pet_Egg_'+hatchablePet.eggKey")
h4.title {{ hatchablePet.name }}
div.text(v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })")
span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
div(slot="modal-footer")
button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}