#hair.section.customize-section
sub-menu.text-center(:items="hairSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
#hair-color(v-if='activeSubPage === "color"')
customize-options(
:items="freeHairColors",
:currentValue="user.preferences.hair.color"
)
div(v-if='editing && set.key !== "undefined"', v-for='set in seasonalHairColors')
customize-options(
:items='set.options',
:currentValue="user.preferences.skin",
:fullSet='!hideSet(set) && !userOwnsSet("hair", set.keys, "color")',
@unlock='unlock(`hair.color.${set.keys.join(",hair.color.")}`)'
)
#style(v-if='activeSubPage === "style"')
div(v-for='set in styleSets')
customize-options(
:items='set.options',
:fullSet='set.fullSet',
@unlock='set.unlock()'
)
#bangs(v-if='activeSubPage === "bangs"')
customize-options(
:items='hairBangs',
:currentValue="user.preferences.hair.bangs"
)
#facialhair(v-if='activeSubPage === "facialhair"')
customize-options(
v-if='editing',
:items='mustacheList'
)
customize-options(
v-if='editing',
:items='beardList',
:fullSet='isPurchaseAllNeeded("hair", ["baseHair5", "baseHair6"], ["mustache", "beard"])',
@unlock='unlock(`hair.mustache.${baseHair5Keys.join(",hair.mustache.")},hair.beard.${baseHair6Keys.join(",hair.beard.")}`)'
)