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)
				i.fa.fa-times.form-control-feedback(
					ng-click="clearSearchText()",
					style="cursor: pointer;",
					ng-show="searchText.value.length > 0"
					aria-hidden
				)
				button.sr-only(
					ng-click="clearSearchText()"
					ng-show="searchText.value.length > 0"
				) #{translate('clear_search')}
			//- i.fa.fa-remove

		.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)
					- var archiveButtonString = settings.overleaf ? translate("archive") : translate("delete")
					- var archiveButtonIcon = settings.overleaf ? "fa-inbox" : "fa-trash-o"
					a.btn.btn-default(
						href,
						aria-label=`{{ isArchiveableProjectSelected ? '${archiveButtonString}' : '${translate("leave")}' }}`,
						tooltip=`{{ isArchiveableProjectSelected ? '${archiveButtonString}' : '${translate("leave")}' }}`,
						tooltip-placement="bottom",
						tooltip-append-to-body="true",
						ng-click="openArchiveProjectsModal()"
					)
						i.fa(ng-class=`isArchiveableProjectSelected ? '${archiveButtonIcon}' : 'fa-sign-out'` aria-hidden)

				.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
			)
				li.container-fluid
					.row
						- var titleClasses = settings.overleaf ? " col-xs-6 col-sm-4 col-md-6" : "col-xs-6"
						- var lastUpdatedClasses = settings.overleaf ? " col-xs-4 col-sm-3 col-md-2" : "col-xs-4"

						div(class=titleClasses)
							input.select-all(
								select-all,
								type="checkbox"
								aria-label=translate('select_all_projects')
							)
							span.header.clickable(ng-click="changePredicate('name')") #{translate("title")}
								i.tablesort.fa(ng-class="getSortIconClass('name')" aria-hidden)
							button.sr-only(ng-click="changePredicate('name')") Sort by #{translate("title")}
						.col-xs-2
							span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")}
								i.tablesort.fa(ng-class="getSortIconClass('accessLevel')" aria-hidden)
							button.sr-only(ng-click="changePredicate('accessLevel')") Sort by #{translate("owner")}
						div(class=lastUpdatedClasses)
							span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")}
								i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')" aria-hidden)
							button.sr-only(ng-click="changePredicate('accessLevel')") Sort by #{translate("last_modified")}
						if settings.overleaf
							.hidden-xs.col-sm-3.col-md-2.action-btn-row-header
								span.header #{translate("actions")}
				li.project_entry.container-fluid(
					ng-repeat="project in visibleProjects | orderBy:predicate:reverse",
					ng-controller="ProjectListItemController"
				)
					.row(
						ng-if="!project.isV1Project"
						select-row
					)
						include ./item
					.row(
						ng-if="project.isV1Project"
					)
						include ./v1-item
				li(
					ng-if="visibleProjects.length == 0",
					ng-cloak
				)
					.row
						.col-xs-12.text-centered
							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")}