<script>
	export default {
		computed:{
			subbed:function(){
				var full = this.note.content || "Note...";
				if(full.length>20) full = full.substr(0,20) + "...";
				return full;
			}
		},
		props:["note"]
	}
</script>
<template>
	<li class="list-group-item hover" @click='$store.dispatch("view",note.id)'>
		<div class="view" :class='{"active":note.id===$store.state.current.id}'>
			<button class="close" @click='$store.commit("remove",note.id)'><i class="fa fa-trash"></i></button> 
			<div class="note">
				<div class="content">{{subbed}}</div>
				<div class="text-muted">{{note.date}}</div> 
			</div>
			<div style='clear:both'></div>
		</div>
	</li>
</template>

<style scoped>

	.view.active {
		background: honeydew;
	}

	.view {
		background: #f5f5f5;
		border-bottom: 1px solid #e6e6e6;
		font-family: monospace;
		cursor: pointer;
	}
	
	.close {
		width: 10%;
		float: right;
		margin: 20px 0;
		background: transparent;
		border: 0;
		font-size: 20px;
		cursor: pointer;
	}
	
	.note {
		padding:15px;
	}

	.content {
		margin-bottom:5px;
	}

	.text-muted {
		font-size:12px;
	}

</style>