fileset-browser
	.browser
		.entry(each="{entry in entries}", class="{folder: entry.type === 'folder'}", onclick="{handleClickEntry}")
			span.filename {entry.name}
			span.size(hide="{entry.type === 'folder'}") {entry.size}
	
	style(scoped, type="scss").
		.browser {
			background-color: #e8e8e8;
			border: 1px solid gray;
			
			.entry {
				font-size: 14px;
				background: linear-gradient(to bottom, #efefef 0%,#e5e5e5 100%);
				padding: 4px 6px;
				cursor: default;
				
				&:hover {
					background: linear-gradient(to bottom, #efefef 0%,#d6d6d6 100%);
				}
				
				&.folder {
					background: linear-gradient(to bottom, #e2e2e2 0%,#d4d4d4 100%);
					
					&:hover {
						background: linear-gradient(to bottom, #e2e2e2 0%,#c4c4c4 100%);
					}
				}
				
				.filename {
					font-weight: 600;
				}
				
				.size {
					float: right;
					color: gray;
				}
			}
		}
		
	script.
		const $ = require("jquery");
		const byteSize = require("byte-size");
		const xtend = require("xtend");
		const rfr = require("rfr");
		
		const listDirectory = rfr("lib/filesystem/list-directory");
		console.log(this);
		Object.assign(this, {
			entries: [],
			
			handleClickEntry: (event) => {
				this.trigger("clickEntry", event.item.entry);
			},
			
			navigate: function(path) {
				return Promise.try(() => {
					return listDirectory(path, {
						includeParent: true
					});
				}).map((entry) => {
					return xtend(entry, {
						size: byteSize(entry.size, {units: "iec"})
					});
				}).tap((entries) => {
					this.entries = entries;
					this.update();
				});
			}
		});