.standard-page
div(v-if='activePage === PAGES.CREATE_GROUP')
h2.text-center {{ $t('createAGroup') }}
.col-xs-12
.col-md-12.form-horizontal
.form-group
label.control-label(for='new-group-name') {{ $t('newGroupName', {groupType: 'text'}) }}
input.form-control#new-group-name.input-medium.option-content(required, type='text', :placeholder="$t('newGroupName', {groupType: 'text'})", v-model='newGroup.name')
.form-group
label(for='new-group-description') {{ $t('description') }}
textarea.form-control#new-group-description.option-content(cols='3', :placeholder="$t('description')", v-model='newGroup.description')
.form-group(v-if='type === "guild"')
.radio
label
input(type='radio', name='new-group-privacy', value='public', v-model='newGroup.privacy')
| {{ $t('public') }}
.radio
label
input(type='radio', name='new-group-privacy', value='private', v-model='newGroup.privacy')
| {{ $t('inviteOnly') }}
br
input.btn.btn-default(type='submit', :disabled='!newGroup.privacy && !newGroup.name', :value="$t('create')")
span.gem-cost {{ '4 ' + $t('gems') }}
p
small {{ $t('gemCost') }}
.form-group
.checkbox
label
input(type='checkbox', v-model='newGroup.leaderOnly.challenges')
| {{ $t('leaderOnlyChallenges') }}
.form-group(v-if='type === "party"')
input.btn.btn-default.form-control(type='submit', :value="$t('create')")
br
br
.row
.col-sm-6.col-sm-offset-3
a.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('create') }}
div(v-if='activePage === PAGES.UPGRADE_GROUP')
h2.text-center {{ $t('upgradeTitle') }}
.row.text-center
.col-6.col-offset-3
a.purchase.btn.btn-primary(@click='upgradeGroup(PAYMENTS.STRIPE)') {{ $t('card') }}
a.purchase(@click='upgradeGroup(PAYMENTS.AMAZON)')
img(src='https://payments.amazon.com/gp/cba/button', :alt="$t('amazonPayments')")
// @TODO: Add paypal
.row
.col-md-6.col-md-offset-3
br
.text-center {{ $t('groupSubscriptionPrice') }}
div(v-if='activePage === PAGES.BENEFITS')
h2.text-center {{ $t('groupBenefitsTitle') }}
.row(style="font-size: 2rem;")
.col-md-6.col-md-offset-3.text-center {{ $t('groupBenefitsDescription') }}
.row.row-margin
.col-md-4
h2 {{ $t('teamBasedTasks') }}
div
// shared tasks
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitOneTitle') }}
span {{ $t('groupBenefitOneDescription') }}
div
// assign tasks
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitTwoTitle') }}
span {{ $t('groupBenefitTwoDescription') }}
div
// claim tasks
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitThreeTitle') }}
span {{ $t('groupBenefitThreeDescription') }}
div
// mark tasks
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitFourTitle') }}
span {{ $t('groupBenefitFourDescription') }}
div
// group managers
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitEightTitle') }}
span {{ $t('groupBenefitEightDescription') }}
.col-md-4
h2 {{ $t('specializedCommunication') }}
div
// chat privately
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitFiveTitle') }}
span {{ $t('groupBenefitFiveDescription') }}
div
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitMessageLimitTitle') }}
span {{ $t('groupBenefitMessageLimitDescription') }}
.col-md-4
h2 {{ $t('funExtras') }}
div
// free subscription
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitSixTitle') }}
span {{ $t('groupBenefitSixDescription') }}
div
// exclusive mount
h3
span.glyphicon.glyphicon-ok-circle(style='margin-right: 1.5rem;')
| {{ $t('groupBenefitSevenTitle') }}
br
br
.row
.col-sm-6.col-sm-offset-3
a.btn.btn-primary.btn-lg.btn-block(ui-sref="options.social.newGroup") {{ $t('createAGroup') }}
.row
.col-md-6.col-md-offset-3
br
.text-center {{ $t('groupSubscriptionPrice') }}