<template>
	<div class="main">
		<p>
			<NcTextField :value.sync="search" :label="t('Find a podcast')">
				<Magnify size="20" />
			</NcTextField>
		</p>
		<Top v-if="!search" />
		<ul v-if="!search">
			<NcAppNavigationNewItem :title="t('', 'Add a RSS link')">
				<template #icon>
					<Plus size="20" />
				</template>
			</NcAppNavigationNewItem>
		</ul>
	</div>
</template>

<script>
import { NcAppNavigationNewItem, NcTextField } from '@nextcloud/vue'
import Magnify from 'vue-material-design-icons/Magnify.vue'
import Plus from 'vue-material-design-icons/Plus.vue'
import Top from '../components/Top.vue'

export default {
	name: 'Discover',
	components: {
		Magnify,
		NcAppNavigationNewItem,
		NcTextField,
		Plus,
		Top,
	},
	data() {
		return {
			search: '',
		}
	},
}
</script>

<style scoped>
	.main {
		margin: 11px 55px;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
</style>
