.standard-page
amazon-payments-modal(:amazon-payments-prop='amazonPayments')
h1 {{ $t('subscription') }}
.row
.col-6
h2 {{ $t('benefits') }}
ul
li
span.hint(:popover="$t('buyGemsGoldText', {gemCostTranslation})",
popover-trigger='mouseenter',
popover-placement='right') {{ $t('buyGemsGold') }}
span.badge.badge-success(v-if='subscription.key !== "basic_earned"') {{ $t('buyGemsGoldCap', buyGemsGoldCap) }}
li
span.hint(:popover="$t('retainHistoryText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('retainHistory') }}
li
span.hint(:popover="$t('doubleDropsText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('doubleDrops') }}
li
span.hint(:popover="$t('mysteryItemText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('mysteryItem') }}
div(v-if='subscription.key !== "basic_earned"')
.badge.badge-success {{ $t('mysticHourglass', mysticHourglass) }}
.small.muted {{ $t('mysticHourglassText') }}
li
span.hint(:popover="$t('exclusiveJackalopePetText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('exclusiveJackalopePet') }}
li
span.hint(:popover="$t('supportDevsText')", popover-trigger='mouseenter', popover-placement='right') {{ $t('supportDevs') }}
.col-6
h2 Plan
table.table.alert.alert-info(v-if='hasSubscription')
tr(v-if='hasCanceledSubscription'): td.alert.alert-warning
span.noninteractive-button.btn-danger {{ $t('canceledSubscription') }}
i.glyphicon.glyphicon-time
| {{ $t('subCanceled') }}
strong {{user.purchased.plan.dateTerminated | date}}
tr(v-if='!hasCanceledSubscription'): td
h4 {{ $t('subscribed') }}
p(v-if='hasPlan && !hasGroupPlan') {{ $t('purchasedPlanId', purchasedPlanIdInfo) }}
p(v-if='hasGroupPlan') {{ $t('youHaveGroupPlan') }}
tr(v-if='user.purchased.plan.extraMonths'): td
span.glyphicon.glyphicon-credit-card
| {{ $t('purchasedPlanExtraMonths', purchasedPlanExtraMonthsDetails) }}
tr(v-if='hasConsecutiveSubscription'): td
span.glyphicon.glyphicon-forward
| {{ $t('consecutiveSubscription') }}
ul.list-unstyled
li {{ $t('consecutiveMonths') }} {{user.purchased.plan.consecutive.count + user.purchased.plan.consecutive.offset}}
li {{ $t('gemCapExtra') }} {{user.purchased.plan.consecutive.gemCapExtra}}
li {{ $t('mysticHourglasses') }} {{user.purchased.plan.consecutive.trinkets}}
div(v-if='!hasSubscription || hasCanceledSubscription')
h4(v-if='hasCanceledSubscription') {{ $t("resubscribe") }}
.form-group.reduce-top-margin
.radio(v-for='block in subscriptionBlocksOrdered', v-if="block.target !== 'group' && block.canSubscribe === true")
label
input(type="radio", name="subRadio", :value="block.key", v-model='subscription.key')
span(v-if='block.original')
span.label.label-success.line-through
| ${{block.original }}
| {{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
span(v-if='!block.original')
| {{ $t('subscriptionRateText', {price: block.price, months: block.months}) }}
.form-inline
.form-group
input.form-control(type='text', v-model='subscription.coupon', :placeholder="$t('couponPlaceholder')")
.form-group
button.btn.btn-primary(type='button', @click='applyCoupon(subscription.coupon)') {{ $t("apply") }}
div(v-if='hasSubscription')
.btn.btn-primary(v-if='canEditCardDetails', @click='showStripeEdit()') {{ $t('subUpdateCard') }}
.btn.btn-sm.btn-danger(v-if='canCancelSubscription', @click='cancelSubscription()') {{ $t('cancelSub') }}
small(v-if='!canCancelSubscription', v-html='getCancelSubInfo()')
.subscribe-pay(v-if='!hasSubscription || hasCanceledSubscription')
h3 {{ $t('subscribeUsing') }}
.row.text-center
.col-md-4
button.purchase.btn.btn-primary(@click='showStripe({subscription:subscription.key, coupon:subscription.coupon})', :disabled='!subscription.key') {{ $t('card') }}
.col-md-4
a.purchase(:href='paypalPurchaseLink', :disabled='!subscription.key', target='_blank')
img(src='https://www.paypalobjects.com/webstatic/en_US/i/buttons/pp-acceptance-small.png', :alt="$t('paypal')")
.col-md-4
a.btn.btn-secondary.purchase(@click="amazonPaymentsInit({type: 'subscription', subscription:subscription.key, coupon:subscription.coupon})")
img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
.row
.col-6
h2 {{ $t('giftSubscription') }}
ol
li {{ $t('giftSubscriptionText1') }}
li {{ $t('giftSubscriptionText2') }}
li {{ $t('giftSubscriptionText3') }}
h4 {{ $t('giftSubscriptionText4') }}