<template>
  <div>
    <h1>{{ info.title }}</h1>
    <RouterLink to="/">All Series</RouterLink>
    <List>
      <ListItem v-for="volume in info.volumes" :key="volume.id" :title="'Volume ' + volume.index" :thumbnail="volume.thumbnail" :action="'/volume/' + volume.id"/>
    </List>
  </div>
</template>

<script>
import API from '@/api-client.js'
import List from '@/components/List'
import ListItem from '@/components/ListItem'

export default {
  name: 'VolumeList',
  components: {
    List,
    ListItem
  },
  data () {
    return {
      info: []
    }
  },
  mounted () {
    API.listVolumes(this.$route.params.id, info => (this.info = info))
  }
}
</script>
