v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs12)
.profile-header
img.animated.fadeInUp(src='/svg/icon-file.svg', alt='Users', style='width: 80px;')
.profile-header-title
.headline.primary--text.animated.fadeInLeft {{$t('profile:pages.title')}}
.subheading.grey--text.animated.fadeInLeft {{$t('profile:pages.subtitle')}}
v-spacer
v-btn.animated.fadeInDown.wait-p1s(color='grey', outlined, @click='refresh', large)
v-icon.grey--text mdi-refresh
v-flex(xs12)
v-card.animated.fadeInUp
v-data-table(
:items='pages'
:headers='headers'
:page.sync='pagination'
:items-per-page='15'
:loading='loading'
must-sort,
sort-by='updatedAt',
sort-desc,
hide-default-footer
)
template(slot='item', slot-scope='props')
tr.is-clickable(:active='props.selected', @click='goToPage(props.item.id)')
td
.body-2: strong {{ props.item.title }}
.caption {{ props.item.description }}
td.admin-pages-path
v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
td {{ props.item.createdAt | moment('calendar') }}
td {{ props.item.updatedAt | moment('calendar') }}
template(slot='no-data')
v-alert.ma-3(icon='mdi-alert', :value='true', outlined, color='grey')
em.caption {{$t('profile:pages.emptyList')}}
.text-center.py-2.animated.fadeInDown(v-if='this.pageTotal > 1')
v-pagination(v-model='pagination', :length='pageTotal')