aside#file-tree.ui-layout-west(ng-controller="FileTreeController")
	.toolbar.toolbar-small
		a(
			href,
			ng-click="openNewDocModal()",
			tooltip-html-unsafe="New<br>File",
			tooltip-placement="bottom"
		)
			i.fa.fa-file
		a(
			href,
			ng-click="openNewFolderModal()",
			tooltip="New Folder",
			tooltip-placement="bottom"
		)
			i.fa.fa-folder
		a(
			href,
			ng-click="openUploadFileModal()",
			tooltip="Upload",
			tooltip-placement="bottom"
		)
			i.fa.fa-upload

		.toolbar-right
			a(href, tooltip="Rename", tooltip-placement="bottom")
				i.fa.fa-pencil
			a(href, tooltip="Delete", tooltip-placement="bottom", tooltip-append-to-body="true")
				i.fa.fa-trash-o

	ul.list-unstyled.file-tree-list
		file-entity(
			entity="entity",
			ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']"
		)


script(type='text/ng-template', id='entityListItemTemplate')
	li(
		ng-class="{ 'selected': entity.selected }",
		ng-controller="FileTreeEntityController"
	)
		.entity(ng-if="entity.type == 'doc'")
			.entity-name(ng-click="select()")
				//- Just a spacer to align with folders
				i.fa.fa-fw.toggle
				i.fa.fa-fw.fa-file
				|  {{ entity.name }}

		.entity(ng-if="entity.type == 'file'")
			.entity-name(ng-click="select()")
				i.fa.fa-fw.toggle
				i.fa.fa-fw.fa-image
				|  {{ entity.name }}

		.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
			.entity-name
				i.fa.fa-fw.toggle(
					ng-class="{'fa-chevron-right': !expanded, 'fa-chevron-down': expanded}"
					ng-click="toggleExpanded()"
				)
			
				i.fa.fa-fw(
					ng-class="{\
						'fa-folder': !expanded, \
						'fa-folder-open': expanded \
					}"
					ng-click="select()"
				)
				span(ng-click="select()")  {{ entity.name }}

			ul.list-unstyled(ng-show="expanded")
				file-entity(entity="child", ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']")

script(type='text/ng-template', id='newDocModalTemplate')
	.modal-header
		h3 New File
	.modal-body
		form(novalidate, name="newDocForm")
			input.form-control(
				type="text",
				placeholder="File Name",
				required,
				ng-model="inputs.name",
				ng-enter="create()",
				focus-on="open"
			)
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) Cancel
		button.btn.btn-primary(
			ng-disabled="newDocForm.$invalid || state.inflight"
			ng-click="create()"
		)
			span(ng-hide="state.inflight") Create
			span(ng-show="state.inflight") Creating...

script(type='text/ng-template', id='newFolderModalTemplate')
	.modal-header
		h3 New File
	.modal-body
		form(novalidate, name="newFolderForm")
			input.form-control(
				type="text",
				placeholder="Folder Name",
				required,
				ng-model="inputs.name",
				ng-enter="create()",
				focus-on="open"
			)
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) Cancel
		button.btn.btn-primary(
			ng-disabled="newFolderForm.$invalid || state.inflight"
			ng-click="create()"
		)
			span(ng-hide="state.inflight") Create
			span(ng-show="state.inflight") Creating...

script(type="text/ng-template", id="uploadFileModalTemplate")
	.modal-header
		h3 Upload File(s)
	.modal-body(
		fine-upload
		endpoint="/project/{{ project_id }}/upload"
		waiting-for-response-text="Inserting file..."
		failed-upload-text="Upload failed, sorry :("
		upload-button-text="Select file(s)"
		drag-area-text="drag file(s)"
		hint-text="Hint: Press and hold the Control (Ctrl) key to select multiple files"
		multiple="true"
		on-complete-callback="onComplete"
		on-upload-callback="onUpload"
		params="{'folder_id': parent_folder_id}"
	)
		span Upload file(s)
	.modal-footer
		button.btn.btn-default(ng-click="cancel()") Cancel