extends ../layout

block content
	//- We need to do .replace(/\//g, '\\/') do that '</script>' -> '<\/script>'
	//- and doesn't prematurely end the script tag.
	script(type="text/javascript").
		window.data = {
			projects: !{JSON.stringify(projects).replace(/\//g, '\\/')},
			tags: !{JSON.stringify(tags).replace(/\//g, '\\/')}
		};
		window.algolia = {
			institutions: {
				app_id:  '#{algolia_app_id}',
				api_key: '#{algolia_api_key}'
			}
		};

	.content.content-alt(ng-controller="ProjectPageController")
		.container
			.row
				.col-md-2
					.dropdown
						a.btn.btn-primary.dropdown-toggle(
							href="#",
							data-toggle="dropdown"
						) New Project
						ul.dropdown-menu(role="menu")
							li
								a(
									href,
									ng-click="openCreateProjectModal()"
								) Blank Project
							li
								a(
									href,
									ng-click="openCreateProjectModal('example')"
								) Example Project
							li
								a(
									href,
									ng-click="openUploadProjectModal()"
								) Upload Project
							li.divider
							li.dropdown-header Templates
							li
								a.menu-indent(href="/templates/cv") CV or Resume
							li
								a.menu-indent(href="/templates/cover-letters") Cover Letter
							li
								a.menu-indent(href="/templates/journals") Journal Article
							li
								a.menu-indent(href="/templates/presentations") Presentation
							li
								a.menu-indent(href="/templates/thesis") Thesis
							li
								a.menu-indent(href="/templates/bibliographies") Bibliographies
							li
								a.menu-indent(href="/templates") View All »

					.row-spaced(ng-if="projects.length > 0", ng-cloak)
						ul.list-unstyled.folders-menu(
							ng-controller="TagListController"
						)
							li(ng-class="{active: (filter == 'all')}")
								a(href, ng-click="filterProjects('all')") All projects
							li(ng-class="{active: (filter == 'owned')}")
								a(href, ng-click="filterProjects('owned')") Your projects
							li(ng-class="{active: (filter == 'shared')}")
								a(href, ng-click="filterProjects('shared')") Shared projects
							li(ng-class="{active: (filter == 'archived')}")
								a(href, ng-click="filterProjects('archived')") Deleted projects
							li(ng-if="tags.length > 0")
								h2 Folders
							li(
								ng-repeat="tag in tags | filter:nonEmpty",
								ng-controller="TagListItemController",
								ng-class="{active: tag.selected}",
								ng-cloak
							)
								a(href="#", ng-click="selectTag()")
									i.icon.fa(
										ng-class="{\
											'fa-folder-open-o': tag.selected,\
											'fa-folder-o': !tag.selected\
										}"
									)
									|  {{tag.name}} 
									span.subdued ({{tag.project_ids.length}})

					.row-spaced(ng-if="projects.length == 0", ng-cloak)
						.first-project
							div
								i.fa.fa-arrow-up.fa-2x
							div
								strong Create your first project!

					- if (showUserDetailsArea)
						.row-spaced#userProfileInformation(ng-if="projects.length > 0", ng-cloak)
							div(ng-controller="UserProfileController")
								hr(ng-show="percentComplete < 100")
								.text-centered.user-profile(ng-show="percentComplete < 100")
									.progress
										.progress-bar.progress-bar-info(ng-style="{'width' : (percentComplete+'%')}")

									p.small
										| Your profile is 
										strong {{percentComplete}}% 
										| complete

									button#completeUserProfileInformation.btn.btn-info(
										ng-hide="formVisable",
										ng-click="openUserProfileModal()"
									) Complete

					-if (settings.enableSubscriptions && !hasSubscription)
						.row-spaced(ng-if="projects.length > 0", ng-cloak).text-centered
							hr
							p.small You are using the free version of ShareLaTeX.
							p
								a(href="/user/subscription/plans").btn.btn-primary Upgrade
							p.small
								| or unlock some free bonus features by 
								a(href="/user/bonus") sharing ShareLaTeX.

				.col-md-10
					.container-fluid
						.row
							.col-md-12
								form.project-search.form-horizontal(role="form")
									.form-group.has-feedback.has-feedback-left.col-md-7
										input.form-control.col-md-7(
											placeholder='Search projects…',
											autofocus='autofocus',
											ng-model="searchText",
											focus-on='search:clear'
										)
										i.fa.fa-search.form-control-feedback-left
										i.fa.fa-times.form-control-feedback(
											ng-click="clearSearchText()",
											style="cursor: pointer;",
											ng-show="searchText.length > 0"
										)
									//- 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='#',
												tooltip="Download",
												tooltip-placement="bottom",
												ng-click="downloadSelectedProjects()"
											)
												i.fa.fa-cloud-download
											a.btn.btn-default(
												href='#',
												tooltip="Delete",
												tooltip-placement="bottom",
												ng-click="openArchiveProjectsModal()"
											)
												i.fa.fa-trash-o

										.btn-group.dropdown(ng-hide="selectedProjects.length < 1")
											a.btn.btn-default.dropdown-toggle(
												href="#",
												data-toggle="dropdown",
												tooltip="Add to folders",
												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 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") Create New Folder

										.btn-group(ng-hide="selectedProjects.length != 1").dropdown
											a.btn.btn-default.dropdown-toggle(
												href='#',
												data-toggle="dropdown"
											) More 
												span.caret
											ul.dropdown-menu.dropdown-menu-right(role="menu")
												li(ng-show="getFirstSelectedProject().accessLevel == 'owner'")
													a(
														href='#',
														ng-click="openRenameProjectModal()"
													) Rename
												li
													a(
														href='#',
														ng-click="openCloneProjectModal()"
													) Make a 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()"
											) 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()"
											) Delete Forever

						.row.row-spaced
							.col-md-12
								.card.card-thin
									ul.list-unstyled.project-list.structured-list(
										select-all-list,
										ng-if="projects.length > 0",
										max-height="windowHeight - 290",
										ng-cloak
									)
										li.container-fluid
											.row
												.col-md-6
													input.select-all(
														select-all,
														type="checkbox"
													)
													span.header Title
												.col-md-2
													span.header Owner
												.col-md-4
													span.header Last Modified
										li.project_entry.container-fluid(
											ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true",
											ng-controller="ProjectListItemController"
										)
											.row
												.col-md-6
													input.select-item(
														select-individual,
														type="checkbox",
														ng-model="project.selected"
													)
													span
														a.projectName(href="/project/{{project.id}}") {{project.name}}
														span.label.label-default.tag-label(ng-repeat='tag in project.tags')
															| {{tag.name}}
												.col-md-2
													span.owner {{ownerName()}}
												.col-md-4
													span.last-modified {{project.lastUpdated | formatDate}}
										li(
											ng-if="visibleProjects.length == 0",
											ng-cloak
										)
											.row
												.col-md-12.text-centered
													small No projects
									div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
										h2 Welcome to ShareLaTeX!
										p New to LaTeX? Start by having a look at our
											a(href="/templates")  templates
											|  or
											a(href="/learn")  help guides
											| ,
											br 
											| or create your first project on the left.

		script(type='text/ng-template', id='newTagModalTemplate')
			.modal-header
				h3 Create New Folder
			.modal-body
				form(name="newTagForm", novalidate)
					input.form-control(
						type="text",
						placeholder="New Folder Name",
						required,
						ng-model="inputs.newTagName",
						on-enter="create()",
						focus-on="open"
					)
			.modal-footer
				button.btn.btn-default(ng-click="cancel()") Cancel
				button.btn.btn-primary(
					ng-disabled="newTagForm.$invalid"
					ng-click="create()"
				) Create

		script(type='text/ng-template', id='renameProjectModalTemplate')
			.modal-header
				h3 Rename Project
			.modal-body
				form(name="renameProjectForm", novalidate)
					input.form-control(
						type="text",
						placeholder="Project Name",
						ng-model="inputs.projectName",
						required,
						on-enter="rename()",
						focus-on="open"
					)
			.modal-footer
				button.btn.btn-default(ng-click="cancel()") Cancel
				button.btn.btn-primary(
					ng-click="rename()",
					ng-disabled="renameProjectForm.$invalid"
				) Rename

		script(type='text/ng-template', id='cloneProjectModalTemplate')
			.modal-header
				h3 Copy Project
			.modal-body
				form(name="cloneProjectForm", novalidate)
					.form-group
						label New Name
						input.form-control(
							type="text",
							placeholder="New Project Name",
							required,
							ng-model="inputs.projectName",
							on-enter="clone()",
							focus-on="open"
						)
			.modal-footer
				button.btn.btn-default(
					ng-disabled="state.inflight"
					ng-click="cancel()"
				) Cancel
				button.btn.btn-primary(
					ng-disabled="cloneProjectForm.$invalid || state.inflight"
					ng-click="clone()"
				)
					span(ng-hide="state.inflight") Copy
					span(ng-show="state.inflight") Copying...

		script(type='text/ng-template', id='newProjectModalTemplate')
			.modal-header
				h3 New Project
			.modal-body
				form(novalidate, name="newProjectForm")
					input.form-control(
						type="text",
						placeholder="Project Name",
						required,
						ng-model="inputs.projectName",
						on-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="newProjectForm.$invalid || state.inflight"
					ng-click="create()"
				)
					span(ng-hide="state.inflight") Create
					span(ng-show="state.inflight") Creating...

		script(type='text/ng-template', id='deleteProjectsModalTemplate')
			.modal-header
				h3 {{action}} Projects
			.modal-body
				div(ng-show="projectsToDelete.length > 0")
					p You are about to delete the following projects:
					ul
						li(ng-repeat="project in projectsToDelete | orderBy:'name'")
							strong {{project.name}}
				div(ng-show="projectsToLeave.length > 0")
					p You are about to leave the following projects:
					ul
						li(ng-repeat="project in projectsToLeave | orderBy:'name'")
							strong {{project.name}}
			.modal-footer
				button.btn.btn-default(
					ng-click="cancel()"
				) Cancel
				button.btn.btn-danger(
					ng-click="delete()"
				) {{action}}

		script(type="text/ng-template", id="uploadProjectModalTemplate")
			.modal-header
				h3 Upload Zipped Project
			.modal-body(
				fine-upload
				endpoint="/project/new/upload"
				waiting-for-response-text="Creating project..."
				failed-upload-text="Upload failed. Is it a valid zip file?"
				upload-button-text="Select a .zip file"
				drag-area-text="drag .zip file"
				multiple="false"
				allowed-extensions="['zip']"
				on-complete-callback="onComplete"
			)
				span Upload a zipped project
			.modal-footer
				button.btn.btn-default(ng-click="cancel()") Cancel

		script(type="text/ng-template", id="userProfileModalTemplate")
			.modal-header
				h3 Your Profile
			.modal-body
				form(enctype='multipart/form-data', method='post')
					.form-group
						label(for="first_name") First Name
						input.form-control(
							type='text',
							name='first_name',
							ng-model="userInfoForm.first_name",
							ng-blur="sendUpdate()",
							placeholder="First Name",
							select-when="formVisable"
						)
					.form-group
						label(for="last_name") Last Name
						input.form-control(
							type='text',
							name='last_name',
							ng-model="userInfoForm.last_name",
							ng-blur="sendUpdate()",
							placeholder='Last Name'
						)
					.form-group#institution_auto_complete
						label(for="institution") Institution
						autocomplete(
							ng-model="userInfoForm.institution",
							name="institution",
							data="institutions",
							ng-blur="sendUpdate()",
							on-type="updateInstitutionsList",
							attr-placeholder="Institution",
							attr-inputclass="form-control"
						)
					.form-group
						label(for="role") Role
						input.form-control(
							type='text',
							name='role',
							ng-model="userInfoForm.role",
							placeholder='Role',
							ng-blur="sendUpdate()",
							typeahead="role for role in roles | filter:$viewValue"
						)
			.modal-footer
				button.btn.btn-info(ng-click="done()") Done