aside.editor-sidebar.full-size(
	ng-controller="FileTreeController"
	ng-class="{ 'multi-selected': multiSelectedCount > 0 }"
	ng-show="ui.view == 'history' && !history.isV2"
)
	.file-tree
		.file-tree-inner(
			ng-if="rootFolder",
			ng-class="no-toolbar"
		)
			ul.list-unstyled.file-tree-list

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

				li(ng-show="deletedDocs.length > 0 && ui.view == 'history'")
					h3 #{translate("deleted_files")}
				li(
					ng-class="{ 'selected': entity.selected }",
					ng-repeat="entity in deletedDocs | orderBy:'name'",
					ng-controller="FileTreeEntityController",
					ng-show="ui.view == 'history'"
				)
					.entity
						.entity-name(
							ng-click="select($event)"
						)
							//- Just a spacer to align with folders
							i.fa.fa-fw.toggle
							i.fa.fa-fw.fa-file

							span  {{ entity.name }}


script(type='text/ng-template', id='entityListItemTemplate')
	li(
		ng-class="{ 'selected': entity.selected, 'multi-selected': entity.multiSelected }",
		ng-controller="FileTreeEntityController"
	)
		.entity(ng-if="entity.type != 'folder'")
			.entity-name(
				ng-click="select($event)"
				context-menu
				data-target="context-menu-{{ entity.id }}"
				context-menu-container="body"
				context-menu-disabled="true"
			)
				//- Just a spacer to align with folders
				i.fa.fa-fw.toggle(ng-if="entity.type != 'folder'")

				i.fa.fa-fw(ng-if="entity.type != 'folder'", ng-class="'fa-' + iconTypeFromName(entity.name)")
					i.fa.fa-external-link-square.fa-rotate-180.linked-file-highlight(
						ng-if="entity.linkedFileData.provider"
					)
				span(
					ng-hide="entity.renaming"
				)  {{ entity.renamingToName || entity.name }}

		.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
			.entity-name(
				ng-click="select($event)"
			)
				div(
					context-menu
					data-target="context-menu-{{ entity.id }}"
					context-menu-container="body"
					context-menu-disabled="true"
				)
					i.fa.fa-fw.toggle(
						ng-if="entity.type == 'folder'"
						ng-class="{'fa-angle-right': !expanded, 'fa-angle-down': expanded}"
						ng-click="toggleExpanded()"
					)

					i.fa.fa-fw(
						ng-if="entity.type == 'folder'"
						ng-class="{\
							'fa-folder': !expanded, \
							'fa-folder-open': expanded \
						}"
						ng-click="select($event)"
					)

					span(
						ng-hide="entity.renaming"
					)  {{ entity.renamingToName || entity.name }}

			ul.list-unstyled(
				ng-if="entity.type == 'folder' && (depth == null || depth < MAX_DEPTH)"
				ng-show="expanded"
			)
				file-entity(
					entity="child",
					ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']"
					depth="(depth || 0) + 1"
				)

			.entity-limit-hit(
				ng-if="depth === MAX_DEPTH"
				ng-show="expanded"
			)
				i.fa.fa-fw
				span.entity-limit-hit-message 
					| Some files might be hidden
					|
					i.fa.fa-question-circle.entity-limit-hit-tooltip-trigger(
						tooltip="Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible."
						tooltip-append-to-body="true"
						aria-hidden="true"
					)
					span.sr-only 
						| Your project has hit Overleaf's maximum file depth limit. Files within this folder won't be visible.