v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.admin-header
img.animated.fadeInUp(src='/svg/icon-venn-diagram.svg', alt='Visualize Pages', style='width: 80px;')
.admin-header-title
.headline.blue--text.text--darken-2.animated.fadeInLeft Visualize Pages
.subtitle-1.grey--text.animated.fadeInLeft.wait-p2s Dendrogram representation of your pages
v-spacer
v-select.mx-5.animated.fadeInDown.wait-p1s(
v-if='locales.length > 0'
v-model='currentLocale'
:items='locales'
style='flex: 0 1 120px;'
solo
dense
hide-details
item-value='code'
item-text='name'
)
v-btn-toggle.animated.fadeInDown(v-model='graphMode', color='primary', dense, rounded)
v-btn.px-5(value='htree')
v-icon(left, :color='graphMode === `htree` ? `primary` : `grey darken-3`') mdi-sitemap
span.text-none Hierarchical Tree
v-btn.px-5(value='hradial')
v-icon(left, :color='graphMode === `hradial` ? `primary` : `grey darken-3`') mdi-chart-donut-variant
span.text-none Hierarchical Radial
v-btn.px-5(value='rradial')
v-icon(left, :color='graphMode === `rradial` ? `primary` : `grey darken-3`') mdi-blur-radial
span.text-none Relational Radial
.admin-pages-visualize-svg.pa-10(ref='svgContainer')
v-alert(v-if='pages.length < 1', outlined, type='warning', style='max-width: 650px; margin: 0 auto;') Looks like there's no data yet to graph!