<template>
	<AppContent>
		<EmptyContent
			v-if="!favorites.length"
			class="padding"
			:description="
				t('repod', 'Pin some subscriptions to see their latest updates')
			"
			:name="t('repod', 'No favorites')">
			<template #icon>
				<StarOffIcon />
			</template>
		</EmptyContent>
		<ul v-if="favorites.length">
			<li v-for="favorite in favorites" :key="favorite.metrics.url">
				<Favorite :feed="favorite" />
			</li>
		</ul>
	</AppContent>
</template>

<script lang="ts">
import AppContent from '../components/Atoms/AppContent.vue'
import EmptyContent from '../components/Atoms/EmptyContent.vue'
import Favorite from '../components/Feed/Favorite.vue'
import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
import type { SubscriptionInterface } from '../utils/types.ts'
import { mapState } from 'pinia'
import { t } from '@nextcloud/l10n'
import { useSubscriptions } from '../store/subscriptions.ts'

export default {
	name: 'Home',
	components: {
		AppContent,
		EmptyContent,
		Favorite,
		StarOffIcon,
	},
	computed: {
		...mapState(useSubscriptions, ['subs']),
		favorites() {
			return this.subs.filter((sub: SubscriptionInterface) => sub.isFavorite)
		},
	},
	methods: {
		t,
	},
}
</script>

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