section.w-flex.column.pb5
nav.fill-width.w-flex.column.justify-space-between
// Tabbed Layout
w-tabs(
:items='Object.keys(tabContent)'
@input='onTabChanged'
center
fill-bar
v-if='isTab'
)
template(#item-title='{ item }')
.w-flex.column.justify-start
p(v-if='tabContent[item].matchPerc') {{ tabContent[item].matchPerc }}%
p(v-else)
p {{ item }}
// About Tab
template(#item-content.1='{ item }')
.tab--about
p {{ tabContent[item].tab }}
br
p {{ tabContent[item].tab }}
br
hr
// Passion Tab
template(#item-content.2='{ item }')
.tab--passion
p {{ tabContent[item].tab }}
SpiderChart(
:labels='aspects.map(label => label.name)'
:profile-data='[5.7, 5.2, 4.8, 5.2, 4.9, 4.9]'
:role-data='[5.3, 4.8, 5.7, 4.8, 5.6, 4.8]'
profile-name='lucy'
v-if='isTab'
)
// Aspirations Tab
template(#item-content.3='{ item }')
.tab--aspirations
p {{ tabContent[item].tab }}
// Skills Tab
template(#item-content.4='{ item }')
.tab--skills
p {{ tabContent[item].tab }}
// Untabbed Layout
ul.w-flex.row.justify-space-between(v-else)
template(
:key='index'
v-for='(item, index) in Object.keys(tabContent)'
)
li.w-flex.row(v-if='item !== "about"')
w-icon.mr1(xl) mdi mdi-heart
.w-flex.column.justify-start
p {{ tabContent[item].matchPerc }}%
p {{ item }}