<template>
	<div v-if="episode && podcastUrl" class="root">
		<strong class="pointer" @click="modal = true">
			{{ episode.name }}
		</strong>
		<router-link :to="toFeedUrl(podcastUrl)">
			<i>{{ episode.title }}</i>
		</router-link>
		<NcModal v-if="modal" @close="modal = false">
			<Modal :episode="episode" />
		</NcModal>
	</div>
</template>

<script lang="ts">
import Modal from '../Atoms/Modal.vue'
import { NcModal } from '@nextcloud/vue'
import { mapState } from 'pinia'
import { toFeedUrl } from '../../utils/url.ts'
import { usePlayer } from '../../store/player.ts'

export default {
	name: 'Infos',
	components: {
		Modal,
		NcModal,
	},
	data: () => ({
		modal: false,
	}),
	computed: {
		...mapState(usePlayer, ['episode', 'podcastUrl']),
	},
	methods: {
		toFeedUrl,
	},
}
</script>

<style scoped>
.pointer {
	cursor: pointer;
}

.root {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 40%;
}
</style>
