v-container(fluid, fill-height, grid-list-xs)
v-card
v-card-title.headline.pl-4 MyAnimeList
v-spacer
v-text-field(
append-icon='search',
label='Search',
single-line,
hide-details,
v-model='search'
)
v-btn.mt-4.ml-4(@click.stop='showSearch()')
v-icon add
span Add
v-btn.mt-4(icon, @click='refresh()')
v-icon(large) refresh
v-data-table(
no-data-text='No data available, did you register your account and set your MyAnimeList public? If yes, it is possible that the account you entered was wrong.',
no-results-text='Seems like you haven\'t watched this one ;)',
rows-per-page-text='Anime per page:',
:loading='isLoading',
:headers='headers',
:items='lists',
:search='search',
:rows-per-page-items='rowsPerPage'
)
template(slot='items', slot-scope='props')
td.text-xs-center
img.entry-image(:src='props.item.image')
td.text-xs-left.entry-title
span.pl-3 {{ props.item.title }}
td.text-xs-center {{ props.item.score }}
td.text-xs-center {{ props.item.type }}
td.text-xs-center {{ props.item.progress }}
td.text-xs-center {{ props.item.status }}
td.text-xs-center.ellipsis.entry-tags
v-tooltip(top)
span(slot='activator') {{ props.item.tags }}
span {{ props.item.tags }}
td
v-btn.blue--text.darken-1(icon, flat, @click.stop='showForm(props.item.id)')
v-icon edit
v-btn.blue--text.darken-1(icon, flat, @click.stop='showInfo(props.item.title, props.item.link)')
v-icon info_outline