<template>
	<div class="root">
		<strong class="pointer" @click="modal = true">
			{{ player.episode.name }}
		</strong>
		<router-link :to="hash">
			<i>{{ player.episode.title }}</i>
		</router-link>
		<NcModal v-if="modal" @close="modal = false">
			<Modal :description="player.episode.description"
				:image="player.episode.image"
				:link="player.episode.link"
				:name="player.episode.name"
				:size="player.episode.size"
				:title="player.episode.title"
				:url="player.episode.url" />
		</NcModal>
	</div>
</template>

<script>
import Modal from '../Atoms/Modal.vue'
import { NcModal } from '@nextcloud/vue'
import { toUrl } from '../../utils/url.js'

export default {
	name: 'Infos',
	components: {
		Modal,
		NcModal,
	},
	data() {
		return {
			modal: false,
		}
	},
	computed: {
		player() {
			return this.$store.state.player
		},
		hash() {
			return toUrl(this.player.podcastUrl)
		},
	},
}
</script>

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

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