<template>
	<div class="content">
		<NcAvatar :display-name="episodeName"
			:is-no-user="true"
			size="256"
			:url="episodeImage" />
		<h2>{{ episodeName }}</h2>
		{{ episodeDescription }}
		<div class="buttons">
			<NcButton v-if="episodeLink" :href="episodeLink" target="_blank">
				<template #icon>
					<OpenInNew :size="20" />
				</template>
				{{ podcastName }}
			</NcButton>
			<NcButton v-if="episodeUrl" :href="episodeUrl" target="_blank">
				<template #icon>
					<Download :size="20" />
				</template>
				{{ t('Download') }}
			</NcButton>
		</div>
	</div>
</template>

<script>
import { NcAvatar, NcButton } from '@nextcloud/vue'
import Download from 'vue-material-design-icons/Download.vue'
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'

export default {
	name: 'Modal',
	components: {
		Download,
		NcAvatar,
		NcButton,
		OpenInNew,
	},
	props: {
		episodeName: {
			type: String,
			required: true,
		},
		episodeImage: {
			type: String,
			required: true,
		},
		episodeDescription: {
			type: String,
			required: true,
		},
		episodeUrl: {
			type: String,
			required: true,
		},
		episodeLink: {
			type: String,
			default: null,
		},
		podcastName: {
			type: String,
			required: true,
		},
	},
}
</script>

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

	.buttons {
		display: flex;
		gap: 1rem;
	}
</style>
