<script>
	import noteAvatar from "./note-avatar.vue";
	import search from "./search.vue";
	export default {
		components:{
			"note-avatar":noteAvatar,
			"search-box":search
		}
	}
</script>
<template>
	<section class="vbox">
		<header class="header bg-light lter bg-gradient clearfix b-b">
			<search-box></search-box>
		</header>
		<section class="scrollable">
			<div class="wrapper">
				<!-- note list --> 
				<ul id="note-items" class="list-group">
					<note-avatar v-for='note in $store.getters.filteredNotes' :note='note'></note-avatar>
				</ul>
				<p class="not-found" v-if='$store.getters.filteredNotes.length === 0'>Nothing found</p>
			</div>
		</section>
	</section>
</template>

<style>
	.not-found {
		padding:25px;
		text-align: center;
	}
</style>