<template>
	<div
		class="item d-flex flex-column text-center mx-2"
		:title="item.name"
		@dblclick="$emit('dblclick')"
		@click="$emit('click')"
	>
		<div class="icon d-flex align-items-center flex-fill py-2 px-3">
			<img v-if="item.type === 'file'" :src="item.url" class="img-fluid" />
			<img v-else src="https://raw.githubusercontent.com/lgarron/folderify/master/folderify/GenericFolderIcon.Yosemite.iconset/icon_128x128.png" class="img-fluid" />
		</div>
		<div class="title">{{ item.name }}</div>
	</div>
</template>

<script>
export default {
	name: "Item",
	props: {
		item: {
			type: Object,
			default: () => {}
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	width: 8rem;
	opacity: 0.8;
	height: 8.5rem;
	cursor: pointer;
	&:hover {
		opacity: 1;
	}
	.title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.icon {
		border: 1px solid transparent;
	}
	&.selected {
		.icon {
			border-color: #ccc;
			border-radius: 0.5rem;
		}
	}
}
</style>
