<template>
	<div class="ui basic segment no-fluf-segment">
		<div class="ui grid">

			<div class="ui sixteen wide column">
				<h2 class="ui header">
					<i class="folder icon"></i>
						<div class="content">
						Attachments
						<div class="sub header">Files and scraped web pages from notes</div>
					</div>
				</h2>
			</div>

			<div class="ui segment" v-if="searchParams.noteId">
				Showing Attachments for note. <div class="ui button" v-on:click="clearNote">Clear</div>
			</div>

			<div class="ui basic segment">
			<attachment-display 
				v-for="item in attachments" 
				:item="item"
				:key="item.id"
			/>
			</div>
			
		</div>
	</div>
</template>
<script>

	import axios from 'axios'

	export default {
		components: {
			'attachment-display': require('@/components/AttachmentDisplayCard').default,
		},
		data: function(){ 
			return {
				attachments: [],
				searchParams: {}
			}
		},
		beforeCreate: function(){
			//
			// Perform Login check
			//
			this.$parent.loginGateway()
		},
		mounted: function(){

			//Mount notes on load if note ID is set
			if(this.$route.params && this.$route.params.id){
				const inputNoteId = this.$route.params.id
				this.searchParams['noteId'] = inputNoteId
			}

			this.searchAttachments()
		},
		methods: {
			clearNote(){
				this.$router.push('/attachments/')
				delete this.searchParams.noteId
				this.searchAttachments()
			},
			searchAttachments (){

				axios.post('/api/attachment/search', this.searchParams)
				.then( results => {
					this.attachments = results.data
				})
			},
		}
	}
</script>
<style type="text/css" scoped>
	.attachment-display-area {
		width: 100%;
		margin-top: 15px;
		box-sizing: border-box;
		padding: 0 5%;
	}
</style>