<!-- eslint-disable vue/no-v-html -->
<template>
	<div>
		<NcAvatar :display-name="name"
			:is-no-user="true"
			:size="256"
			:url="image" />
		<h2>{{ name }}</h2>
		<p v-html="strippedDescription" />
		<div>
			<NcButton v-if="link"
				:href="link"
				target="_blank">
				<template #icon>
					<OpenInNewIcon :size="20" />
				</template>
				{{ title }}
			</NcButton>
			<NcButton v-if="url"
				:href="url"
				target="_blank">
				<template #icon>
					<DownloadIcon :size="20" />
				</template>
				{{ t('repod', 'Download') }} {{ size ? `(${episodeFileSize})` : '' }}
			</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 { cleanHtml } from '../../utils/text.js'
import { humanFileSize } from '../../utils/size.js'

export default {
	name: 'Modal',
	components: {
		DownloadIcon,
		NcAvatar,
		NcButton,
		OpenInNewIcon,
	},
	props: {
		description: {
			type: String,
			default: '',
		},
		image: {
			type: String,
			required: true,
		},
		link: {
			type: String,
			default: null,
		},
		name: {
			type: String,
			required: true,
		},
		size: {
			type: Number,
			default: null,
		},
		title: {
			type: String,
			required: true,
		},
		url: {
			type: String,
			required: true,
		},
	},
	computed: {
		episodeFileSize() {
			return humanFileSize(this.size)
		},
		strippedDescription() {
			return cleanHtml(this.description)
		},
	},
}
</script>

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