<template>
	<div class="note-title-display-card fade-in-fwd" :style="{'background-color':color, 'color':fontColor}">
		
		<div class="ui grid max-height">

			<div class="top aligned row">
				<div class="sixteen wide column overflow-hidden">
					<h3 @click="onClick(note.id)" class="clickable">{{note.title}}</h3>
				</div>
				<div class="sixteen wide column overflow-hidden">
					<p @click="onClick(note.id)" class="clickable">{{note.subtext}}</p>
				</div>
			</div>

			<div class="bottom aligned row">
				<div class="ten wide column clickable" @click="onClick(note.id)">Edited: {{$helpers.timeAgo(note.updated)}}</div>

				<div class="six wide right aligned column">
					<span v-if="note.attachment_count > 0" class>
						<i class="grey linkify icon"></i> {{note.attachment_count}}
					</span>
					<span v-if="note.tag_count == 1" data-tooltip="Note has 1 tag">
						<i class="grey tags icon"></i> {{note.tag_count}}
					</span>
					<span v-if="note.tag_count > 1" :data-tooltip="`Note has ${note.tag_count} tags`">
						<i class="grey tags icon"></i> {{note.tag_count}}
					</span>
					<delete-button :note-id="note.id" />
				</div>
			</div>
		</div>


		<!-- Display highlights from solr results  -->
		<div v-if="note.note_highlights.length > 0" class="term-usage">
			<p>Note Text</p>
			<div class="usage-row" v-for="highlight in note.note_highlights" v-html="highlight"></div>
		</div>
		<div v-if="note.attachment_highlights.length > 0" class="term-usage">
			<p><i class="linkify icon"></i> Note URL Text</p>
			<div class="usage-row" v-for="highlight in note.attachment_highlights" v-html="highlight"></div>
		</div>
		<div v-if="note.tag_highlights.length > 0" class="term-usage">
			<i class="tags icon"></i> Tag
			<div class="ui icon large label" v-for="highlight in note.tag_highlights" v-html="highlight"></div>
		</div>
		
	</div>
</template>

<script>

	export default {
	name: 'NoteTitleDisplayCard',
		props: [ 'onClick', 'data' ],
		components: {
			'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
		},
		data () {
			return {
				note: null,
				color: null, //'#FFF',
				fontColor: null, //'#000'
			}
		},
		beforeMount(){

			this.note = this.data

			if(this.note.color != null && this.note.color != '#FFF'){
				this.color = this.note.color
				this.fontColor = '#FFF'
			}
		}
	}
</script>
<style type="text/css">

	.term-usage {
		border: 1px solid #DDD;
		padding: 10px;
	}
	.term-usage em {
		color: green;
		background-color: white;
		font-weight: bold;
	}
	.usage-row + .usage-row {
		padding: 8px 0 0;
		border-top: 1px solid #DDD;
		margin: 8px 0 0;
	}

	.note-title-display-card {
		position: relative;
		box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
		margin: 0 15px 15px 0;
		padding: 1em;
		border-radius: .28571429rem;
		border: 1px solid;
		border-color: var(--border_color);
		width: 31.5%;
		/*transition: width 0.2s;*/
	}
	.one-column .note-title-display-card {
		margin-right: 65%;
		width: 18%;
	}
	.overflow-hidden {
		overflow: hidden;
	}
	.overflow-hidden p, .overflow-hidden h3 {
		word-break: break-word;
	}
	.max-height {
		height: calc(100% + 30px);
	}

	@media only screen and (max-width: 740px) {
		.note-title-display-card {
			width: 100%;
			margin: 15px 0 0 0;
		}
	}
</style>