b-modal#group-plan-overview(title="Empty", size='lg', hide-footer=true, @shown='shown()')
.header-wrap.text-center(slot="modal-header")
h2(v-once) {{ $t('gettingStarted') }}
p(v-once) {{ $t('congratsOnGroupPlan') }}
.row
.col-12
.card(:class='{expanded: expandedQuestions.question1}')
.question-head
.q Q.
.title {{ $t('whatsIncludedGroup') }}
.arrow.float-right(@click='toggle("question1")')
.svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question1')
.svg-icon(v-html="icons.downIcon", v-else)
.question-body(v-if='expandedQuestions.question1')
p {{ $t('whatsIncludedGroupDesc') }}
.col-12
.card(:class='{expanded: expandedQuestions.question2}')
.question-head
.q Q.
.title {{ $t('howDoesBillingWork') }}
.arrow.float-right(@click='toggle("question2")')
.svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question2')
.svg-icon(v-html="icons.downIcon", v-else)
.question-body(v-if='expandedQuestions.question2')
p {{ $t('howDoesBillingWorkDesc') }}
.col-12
.card(:class='{expanded: expandedQuestions.question3}')
.question-head
.q Q.
.title {{ $t('howToAssignTask') }}
.arrow.float-right(@click='toggle("question3")')
.svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question3')
.svg-icon(v-html="icons.downIcon", v-else)
.question-body(v-if='expandedQuestions.question3')
p {{ $t('howToAssignTaskDesc') }}
.assign-tasks.image-example
.col-12
.card(:class='{expanded: expandedQuestions.question4}')
.question-head
.q Q.
.title {{ $t('howToRequireApproval') }}
.arrow.float-right(@click='toggle("question4")')
.svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question4')
.svg-icon(v-html="icons.downIcon", v-else)
.question-body(v-if='expandedQuestions.question4')
p {{ $t('howToRequireApprovalDesc') }}
.requires-approval.image-example
p {{ $t('howToRequireApprovalDesc2') }}
.approval-requested.image-example
.col-12
.card(:class='{expanded: expandedQuestions.question5}')
.question-head
.q Q.
.title {{ $t('whatIsGroupManager') }}
.arrow.float-right(@click='toggle("question5")')
.svg-icon(v-html="icons.upIcon", v-if='expandedQuestions.question5')
.svg-icon(v-html="icons.downIcon", v-else)
.question-body(v-if='expandedQuestions.question5')
p {{ $t('whatIsGroupManagerDesc') }}
.promote-leader.image-example
.col-12.text-center
button.btn.btn-primary.close-button(@click='close()') {{ $t('goToTaskBoard') }}