<template>
	<fragment>
		<NcLoadingIcon v-if="loading" />
		<ul v-if="!loading">
			<NcListItem v-for="episode in episodes"
				:key="episode.episodeUrl"
				:name="episode.episodeName" />
		</ul>
	</fragment>
</template>

<script>
import { NcListItem, NcLoadingIcon } from '@nextcloud/vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'List',
	components: {
		NcListItem,
		NcLoadingIcon,
	},
	data() {
		return {
			episodes: [],
			loading: true,
		}
	},
	computed: {
		url() {
			return atob(this.$route.params.url)
		},
	},
	async mounted() {
		try {
			this.loading = true
			const episodes = await axios.get(generateUrl('/apps/repod/episodes?url={url}', { url: this.url }))
			this.episodes = episodes.data
		} catch (e) {
			console.error(e)
			showError(t('Could not fetch episodes'))
		} finally {
			this.loading = false
		}
	},
}
</script>
