overleaf/services/web/app/views/project/list/project-list.pug

.row
	.col-xs-12(ng-cloak)
		form.project-search.form-horizontal(role="form")
			.form-group.has-feedback.has-feedback-left.col-md-7.col-xs-12
				input.form-control.col-md-7.col-xs-12(
					placeholder=translate('search_projects')+"…",
					aria-label=translate('search_projects')+"…",
					autofocus='autofocus',
					ng-model="searchText.value",
					focus-on='search:clear',
					ng-keyup="searchProjects()"
				)
				i.fa.fa-search.form-control-feedback-left(aria-hidden="true")
				i.fa.fa-times.form-control-feedback(
					ng-click="clearSearchText()",
					style="cursor: pointer;",
					ng-show="searchText.value.length > 0"
					aria-hidden="true"
				)
				button.sr-only(
					type="button"
					ng-click="clearSearchText()"
					ng-show="searchText.value.length > 0"
				) #{translate('clear_search')}

		.project-tools(ng-cloak)
			.btn-toolbar(ng-show="filter != 'archived'")
				.btn-group(ng-hide="selectedProjects.length < 1")
					a.btn.btn-default(
						href,
						aria-label=translate('download'),
						tooltip=translate('download'),
						tooltip-placement="bottom",
						tooltip-append-to-body="true",
						ng-click="downloadSelectedProjects()"
					)
						i.fa.fa-cloud-download(aria-hidden="true")
					a.btn.btn-default(
						href,
						aria-label=`{{ isArchiveableProjectSelected ? '${translate("archive")}' : '${translate("leave")}' }}`,
						tooltip=`{{ isArchiveableProjectSelected ? '${translate("archive")}' : '${translate("leave")}' }}`,
						tooltip-placement="bottom",
						tooltip-append-to-body="true",
						ng-click="openArchiveProjectsModal()"
					)
						i.fa(ng-class=`isArchiveableProjectSelected ? 'fa-inbox' : 'fa-sign-out'` aria-hidden="true")

				.btn-group.dropdown(ng-hide="selectedProjects.length < 1", dropdown)
					a.btn.btn-default.dropdown-toggle(
						href,
						data-toggle="dropdown",
						dropdown-toggle,
						tooltip=translate('add_to_folders'),
						tooltip-append-to-body="true",
						tooltip-placement="bottom"
					)
						i.fa.fa-folder-open-o
						|  
						span.caret
						span.sr-only #{translate('add_to_folders')}
					ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu.tags-dropdown-menu(
						role="menu"
						ng-controller="TagListController"
					)
						li.dropdown-header #{translate("add_to_folder")}
						li(
							ng-repeat="tag in tags | orderBy:'name'",
							ng-controller="TagDropdownItemController"
							ng-if="!tag.isV1"
						)
							a(href="#", ng-click="addOrRemoveProjectsFromTag()", stop-propagation="click")
								i.fa(
									ng-class="{\
										'fa-check-square-o': areSelectedProjectsInTag == true,\
										'fa-square-o': areSelectedProjectsInTag == false,\
										'fa-minus-square-o': areSelectedProjectsInTag == 'partial'\
									}"
								)
								span.sr-only Add or remove project from tag
								|  {{tag.name}}
						li.divider
						li
							a(href, ng-click="openNewTagModal()", stop-propagation="click") #{translate("create_new_folder")}

				.btn-group(ng-hide="selectedProjects.length != 1", dropdown).dropdown
					a.btn.btn-default.dropdown-toggle(
						href,
						data-toggle="dropdown",
						dropdown-toggle
					) #{translate("more")} 
						span.caret
					ul.dropdown-menu.dropdown-menu-right(role="menu")
						li(ng-show="getFirstSelectedProject().accessLevel == 'owner'")
							a(
								href,
								ng-click="openRenameProjectModal()"
							) #{translate("rename")}
						li
							a(
								href,
								ng-click="openCloneProjectModal()"
							) #{translate("make_copy")}

			.btn-toolbar(ng-show="filter == 'archived'")
				.btn-group(ng-hide="selectedProjects.length < 1")
					a.btn.btn-default(
						href,
						data-original-title="Restore",
						data-toggle="tooltip",
						data-placement="bottom",
						ng-click="restoreSelectedProjects()"
					) #{translate("restore")}

				.btn-group(ng-hide="selectedProjects.length < 1")
					a.btn.btn-danger(
						href,
						data-original-title="Delete Forever",
						data-toggle="tooltip",
						data-placement="bottom",
						ng-click="openDeleteProjectsModal()"
					) #{translate("delete_forever")}

.row.row-spaced
	each warning in warnings
		.col-xs-12
			.alert.alert-warning(role="alert")= warning

	.col-xs-12
		.card.card-thin.project-list-card
			ul.list-unstyled.project-list.structured-list(
				select-all-list,
				ng-if="projects.length > 0",
				max-height="projectListHeight - 25",
				ng-cloak
			)
				table.project-list-table
					tr.project-list-table-header-row
						th.project-list-table-name-cell
							.project-list-table-name-container
								input.project-list-table-select-item(
									select-all,
									type="checkbox"
									aria-label=translate('select_all_projects')
								)
								span.header.clickable.project-list-table-name(ng-click="changePredicate('name')") #{translate("title")}
									i.tablesort.fa(ng-class="getSortIconClass('name')" aria-hidden="true")
								button.sr-only(ng-click="changePredicate('name')") Sort by #{translate("title")}
						th.project-list-table-owner-cell
							span.header.clickable(ng-click="changePredicate('ownerName')") #{translate("owner")}
								i.tablesort.fa(ng-class="getSortIconClass('ownerName')" aria-hidden="true")
							button.sr-only(ng-click="changePredicate('ownerName')") Sort by #{translate("owner")}
						th.project-list-table-lastupdated-cell
							span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")}
								i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')" aria-hidden="true")
							button.sr-only(ng-click="changePredicate('lastUpdated')") Sort by #{translate("last_modified")}
						th.project-list-table-actions-cell
							span.header #{translate("actions")}
					tr.project-list-table-row(
						ng-repeat="project in visibleProjects | orderBy:getValueForCurrentPredicate:reverse:comparator",
						ng-controller="ProjectListItemController"
						select-row
					)
						include ./item
						include ./v1-item
					tr(
						ng-if="visibleProjects.length == 0",
						ng-cloak
					)
						td(colspan="4").project-list-table-no-projects-cell
								span.small #{translate("no_projects")}

			div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
				h2 #{translate("welcome_to_sl")}
				p #{translate("new_to_latex_look_at")} 
					a(href="/templates") #{translate("templates").toLowerCase()}
					|   #{translate("or")}
					a(href="/learn")  #{translate("latex_help_guide")}
					| ,
					br 
					|  #{translate("or_create_project_left")}