b-modal#buy-modal(
:hide-header="true",
@change="onChange($event)"
)
span.badge.badge-pill.badge-dialog(
:class="{'item-selected-badge': isPinned}",
v-if="withPin",
@click.prevent.stop="togglePinned()"
)
span.svg-icon.inline.color.icon-10(v-html="icons.pin")
div.close
span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close", @click="hideDialog()")
div.content(v-if="item != null")
div.inner-content
slot(name="item", :item="item")
div(v-if="showAvatar")
avatar(
:showVisualBuffs="false",
:member="user",
:avatarOnly="true",
:hideClassBadge="true",
:withBackground="true",
:overrideAvatarGear="getAvatarOverrides(item)",
:spritesMargin="'0px auto 0px -24px'",
)
item.flat.bordered-item(
:item="item",
:itemContentClass="item.class",
:showPopover="false",
v-else-if="item.key != 'gem'"
)
h4.title {{ itemText }}
div.text(v-html="itemNotes")
slot(name="additionalInfo", :item="item")
equipmentAttributesGrid.attributesGrid(
v-if="showAttributesGrid",
:item="item",
:user="user"
)
.purchase-amount(v-if='item.value > 0')
.how-many-to-buy(v-if='showAmountToBuy(item)')
strong {{ $t('howManyToBuy') }}
div(v-if='showAmountToBuy(item)')
.box
input(type='number', min='0', step='1', v-model.number='selectedAmountToBuy')
span(:class="{'notEnough': notEnoughCurrency}")
span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons[getPriceClass()]")
span.cost(:class="getPriceClass()") {{ item.value }}
div(v-else)
span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons[getPriceClass()]")
span.cost(:class="getPriceClass()") {{ item.value }}
.gems-left(v-if='item.key === "gem"')
strong(v-if='gemsLeft > 0') {{ gemsLeft }} {{ $t('gemsRemaining') }}
strong(v-if='gemsLeft === 0') {{ $t('maxBuyGems') }}
div(v-if='attemptingToPurchaseMoreGemsThanAreLeft')
| {{$t('notEnoughGemsToBuy')}}
button.btn.btn-primary(
@click="purchaseGems()",
v-if="getPriceClass() === 'gems' && !this.enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
) {{ $t('purchaseGems') }}
button.btn.btn-primary(
@click="buyItem()",
v-else,
:disabled='item.key === "gem" && gemsLeft === 0 || attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid',
:class="{'notEnough': !preventHealthPotion || !this.enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)}"
) {{ $t('buyNow') }}
div.limitedTime(v-if="item.event && item.owned == null")
span.svg-icon.inline.icon-16.clock-icon(v-html="icons.clock")
span.limitedString {{ limitedString }}
.free-rebirth.d-flex.align-items-center(v-if='item.key === "rebirth_orb" && item.value > 0 && user.stats.lvl >= 100')
.m-auto
span.svg-icon.inline.icon-16.mr-2.pt-015(v-html="icons.whiteClock")
span(v-html='$t("nextFreeRebirth", {days: nextFreeRebirth})')
div.clearfix(slot="modal-footer")
span.balance.float-left {{ $t('yourBalance') }}
balanceInfo(
:withHourglass="getPriceClass() === 'hourglasses'",
:currencyNeeded="getPriceClass()",
:amountNeeded="item.value"
).float-right