Modal episode (to be split)

src/components/Feed/Episodes.vue

@@ -9,7 +9,8 @@
 				:details="moment(episode.episodePubDate.date).fromNow()"
 				:force-display-actions="true"
 				:name="episode.episodeName"
-				:title="episode.episodeDescription">
+				:title="episode.episodeDescription"
+				@click="modalEpisode = episode">
 				<template #icon>
 					<NcAvatar :display-name="episode.episodeName"
 						:is-no-user="true"
@@ -34,13 +35,41 @@
 				</template>
 			</NcListItem>
 		</AdaptativeList>
+		<NcModal v-if="modalEpisode"
+			size="small"
+			@close="modalEpisode = null">
+			<div class="modal-content">
+				<NcAvatar :display-name="modalEpisode.episodeName"
+					:is-no-user="true"
+					size="256"
+					:url="modalEpisode.episodeImage" />
+				<h2>{{ modalEpisode.episodeName }}</h2>
+				{{ modalEpisode.episodeDescription }}
+				<div class="modal-buttons">
+					<NcButton v-if="modalEpisode.episodeLink" :href="modalEpisode.episodeLink" target="_blank">
+						<template #icon>
+							<OpenInNew :size="20" />
+						</template>
+						{{ modalEpisode.podcastName }}
+					</NcButton>
+					<NcButton v-if="modalEpisode.episodeUrl" :href="modalEpisode.episodeUrl" target="_blank">
+						<template #icon>
+							<Download :size="20" />
+						</template>
+						{{ t('Download') }}
+					</NcButton>
+				</div>
+			</div>
+		</NcModal>
 	</div>
 </template>
 
 <script>
-import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
+import { NcActionButton, NcAvatar, NcButton, NcListItem, NcModal } from '@nextcloud/vue'
 import AdaptativeList from '../Atoms/AdaptativeList.vue'
+import Download from 'vue-material-design-icons/Download.vue'
 import Loading from '../Atoms/Loading.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
 import StopButton from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
@@ -53,10 +82,14 @@ export default {
 	name: 'Episodes',
 	components: {
 		AdaptativeList,
+		Download,
 		Loading,
 		NcActionButton,
 		NcAvatar,
+		NcButton,
 		NcListItem,
+		NcModal,
+		OpenInNew,
 		PlayButton,
 		StopButton,
 	},
@@ -64,6 +97,7 @@ export default {
 		return {
 			episodes: [],
 			loading: true,
+			modalEpisode: null,
 		}
 	},
 	computed: {
@@ -103,4 +137,17 @@ export default {
 	.ended {
 		opacity: .5;
 	}
+
+	.modal-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
+		margin: 2rem;
+	}
+
+	.modal-buttons {
+		display: flex;
+		gap: 1rem;
+	}
 </style>