<template>
	<div class="flex">
		<NcAvatar
			:display-name="episode.name"
			:is-no-user="true"
			:size="256"
			:url="episode.image" />
		<h2>{{ episode.name }}</h2>
		<SafeHtml :source="episode.description" />
		<div class="flex">
			<NcButton v-if="episode.link" :href="episode.link" target="_blank">
				<template #icon>
					<OpenInNewIcon :size="20" />
				</template>
				{{ episode.title }}
			</NcButton>
			<NcButton
				v-if="episode.url"
				:download="filenameFromUrl(episode.url)"
				:href="episode.url"
				target="_blank">
				<template #icon>
					<DownloadIcon :size="20" />
				</template>
				{{ t('repod', 'Download') }}
				{{ episode.size ? `(${humanFileSize(episode.size)})` : '' }}
			</NcButton>
		</div>
	</div>
</template>

<script>
import { NcAvatar, NcButton } from '@nextcloud/vue'
import DownloadIcon from 'vue-material-design-icons/Download.vue'
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
import SafeHtml from './SafeHtml.vue'
import { filenameFromUrl } from '../../utils/url.js'
import { humanFileSize } from '../../utils/size.js'

export default {
	name: 'Modal',
	components: {
		DownloadIcon,
		NcAvatar,
		NcButton,
		OpenInNewIcon,
		SafeHtml,
	},
	props: {
		episode: {
			type: Object,
			required: true,
		},
	},
	methods: {
		filenameFromUrl,
		humanFileSize,
	},
}
</script>

<style scoped>
.flex {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 2rem;
}
</style>
