<style type="text/css" scoped>

	.attachment-display-card {
		width: 100%;
		padding: 0 0 20px;
		display: inline-block;
	}

		.attachment-image {
			width: 100%;
			max-width: 150px;
			float: left;
			margin: 0 15px 0 0;
		}
		.image-placeholder {
			width: 150px;
			height: 60px;
			border: 1px solid #DDD;
			float: left;
			margin: 0 15px 0 0;
		}


		.text {
			width: 100%;
			background: transparent;
			border: none;
			border-bottom: 1px solid;
			font-size: 1.4em;
			margin: 0 0 10px;
			line-height: 1.4em;
		}
		.link {
			font-size: 1.4em;
			margin: 0 0 5px;
			display: inline-block;
			white-space:nowrap;
		    overflow:hidden;
		    text-overflow: ellipsis;
		    width: calc(100% - 180px);
		    line-height: 1.4em;
		}
</style>

<template>
	<div class="attachment-display-card">


			<input class="text" v-on:blur="saveIt()" v-model="text"></input>

			<div v-if="item.attachment_type == 1">
				<div class="image-holder" v-if="item.file_location">
					<a v-if="item.file_location" :href="item.url" target="_blank">
						<img class="attachment-image" :src="`/api/static/${item.file_location}`">
					</a>
				</div>
				<div v-else class="image-placeholder"></div>

				<a class="link" v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
			</div>

			<div v-if="item.attachment_type == 2">
				<div class="image-holder" v-if="item.file_location">
					<a v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">
						<img class="attachment-image" :src="`/api/static/${item.file_location}`">
					</a>
				</div>
				<div v-else class="image-placeholder"></div>

				<a class="link" v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>

			</div>

			

			<div class="ui small compact basic button" v-on:click="openNote">
				Open Note
			</div>
		
	</div>
</template>
<script>
	import axios from 'axios'

	export default {

		props: [ 'item' ],
		data: function(){ 
			return {
				things: [],
				text: '',
			}
		},
		beforeCreate: function(){
		},
		mounted: function(){
			this.text = this.item.text
		},
		methods: {
			openNote(){
				const noteId = this.item.note_id
				this.$router.push('/notes/open/'+noteId)
			},
			saveIt(){

				//Don't save text if it didn'th change
				if(this.item.text == this.text){
					return 
				}

				const data = {
					'attachmentId': this.item.id,
					'updatedText': this.text,
					'noteId': this.item.note_id
				}

				//Save it, and don't think about it.
				axios.post('/api/attachment/update', data)

			},
		}
	}
</script>