.row
	.col-xs-12(ng-cloak)

		.project-tools(ng-cloak)
			.btn-toolbar(ng-show="filter != 'archived'")
				.btn-group(ng-hide="selectedProjects.length < 1")
					a.btn.btn-default(
						href='#',
						tooltip="#{translate('download')}",
						tooltip-placement="bottom",
						tooltip-append-to-body="true",
						ng-click="downloadSelectedProjects()"
					)
						i.fa.fa-cloud-download
					a.btn.btn-default(
						href='#',
						tooltip="#{translate('delete')}",
						tooltip-placement="bottom",
						tooltip-append-to-body="true",
						ng-click="openArchiveProjectsModal()"
					)
						i.fa.fa-trash-o

				.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
					ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu(
						role="menu"
						ng-controller="TagListController"
					)
						li.dropdown-header #{translate("add_to_folder")}
						li(
							ng-repeat="tag in tags | filter:nonEmpty | orderBy:'name'",
							ng-controller="TagDropdownItemController"
						)
							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'\
									}"
								)
								|  {{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
	.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
						.col-xs-6
							input.select-all(
								select-all,
								type="checkbox"
							)
							span.header.clickable(ng-click="changePredicate('name')") #{translate("title")}
								i.tablesort.fa(ng-class="getSortIconClass('name')")
						.col-xs-2
							span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")}
								i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
						.col-xs-4
							span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")}
								i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')")
				li.project_entry.container-fluid(
					ng-repeat="project in visibleProjects | orderBy:predicate:reverse",
					ng-controller="ProjectListItemController"
				)
					.row
						.col-xs-6
							input.select-item(
								select-individual,
								type="checkbox",
								ng-model="project.selected"
							)
							span
								a.projectName(href="/project/{{project.id}}") {{project.name}}
								span(
									ng-controller="TagListController"
								)
									a.label.label-default.tag-label(
										href,
										ng-repeat='tag in project.tags',
										ng-click="selectTag(tag)"
									) {{tag.name}}
						.col-xs-2
							span.owner {{ownerName()}}
						.col-xs-4
							span.last-modified {{project.lastUpdated | formatDate}}
				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")}


					.row
						.col-md-offset-4.col-md-4
							.dropdown(dropdown)
								a.btn.btn-success.dropdown-toggle(
									href="#",
									data-toggle="dropdown",
									dropdown-toggle
								)
									| Create First Project
								style.
									.dropdown{text-align:center;}
									.button, .dropdown-menu{margin:2px auto}
									.dropdown-menu{width:200px; left:50%; margin-left:-100px;}

								ul.dropdown-menu(role="menu", style="text-align:center;")
									li
										a(
											href,
											ng-click="openCreateProjectModal()"
											sixpack-convert="first_sign_up",
										) #{translate("blank_project")}
									li
										a(
											href,
											sixpack-convert="first_sign_up",
											ng-click="openCreateProjectModal('example')"
										) #{translate("example_project")}
									li
										a(
											href,
											sixpack-convert="first_sign_up",
											ng-click="openUploadProjectModal()"
										) #{translate("upload_project")}
									!= moduleIncludes("newProjectMenu", locals)
									if (templates)
										li.divider
										li.dropdown-header #{translate("templates")}
										each item in templates
											li
												a.menu-indent(href=item.url, sixpack-convert="first_sign_up") #{translate(item.name)}