<template>
	<AppContent class="padding">
		<NcTextField v-model="search" :label="t('repod', 'Find a podcast')">
			<template #icon>
				<Magnify :size="20" />
			</template>
		</NcTextField>
		<Search v-if="search" :value="search" />
		<Toplist v-if="!search" type="hot" />
		<Toplist v-if="!search" type="new" />
		<AddRss v-if="!search" />
	</AppContent>
</template>

<script lang="ts">
import AddRss from '../components/Discover/AddRss.vue'
import AppContent from '../components/Atoms/AppContent.vue'
import Magnify from 'vue-material-design-icons/Magnify.vue'
import { NcTextField } from '@nextcloud/vue'
import Search from '../components/Discover/Search.vue'
import Toplist from '../components/Discover/Toplist.vue'
import { t } from '@nextcloud/l10n'

export default {
	name: 'Discover',
	components: {
		AddRss,
		AppContent,
		Magnify,
		NcTextField,
		Search,
		Toplist,
	},
	data: () => ({
		search: '',
	}),
	methods: {
		t,
	},
}
</script>

<style scoped>
.padding {
	padding: 15px 51px;
}
</style>
