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='aspects.map(data => data.percentage)'
:target-data='targetScore'
:profile-name='name'
v-if='isTab'
)
// Aspirations Tab
template(#item-content.3='{ item }')
.tab--aspirations
p {{ tabContent[item].tab }}
w-timeline(:items='aspirations')
// Skills Tab
template(#item-content.4='{ item }')
.tab--skills
p Education
w-timeline(:items='skills.education')
p Licenses & Certificates
w-timeline(:items='skills.licenses')
p Skills
w-timeline(:items='skills.skills')
p Experience
w-timeline(:items='skills.experience')
// 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.icon-compass(xl)
.w-flex.column.justify-start
p
span {{ tabContent[item].matchPerc }}%
p.text-capitalize {{ item }}