fileset-browser
	.browser
		.entry(each="{entry in entries}" class="{folder: entry.type === 'folder'}")
			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;
				
				&.folder {
					background: linear-gradient(to bottom, #e2e2e2 0%,#d4d4d4 100%);
				}
				
				.filename {
					font-weight: 600;
				}
				
				.size {
					float: right;
					color: gray;
				}
			}
		}
		
	script.
		const $ = require("jquery");
		const path = require("path");
		const byteSize = require("byte-size");
		const xtend = require("xtend");
		const rfr = require("rfr");
		
		const listDirectory = rfr("lib/filesystem/list-directory");
		
		Promise.try(() => {
			return listDirectory(path.join(__dirname, "../../../"));
		}).map((entry) => {
			return xtend(entry, {
				size: byteSize(entry.size, {units: "iec"})
			});
		}).then((entries) => {
			this.entries = entries;
			this.update();
		});
		
		/*
		this.on("mount", () => {
			$("strong", this.root).on("click", () => {
				this.trigger("click");
			});
		});
		*/